Question

嘿，我试图通过向左移动10％和向右移动10％来让两个div移出彼此。它们会在1000之后移出彼此，但在我在1000之前向后滚动之后不会再回来

$(document).ready(function(){

var jq  = $("#jqimg")
var kevin = $("#kevinimg")


 $(window).scroll(function () {

      if ($(this).scrollTop() > 1000) {
        kevin.animate({
            marginLeft: "10%",
        },600);

        jq.animate({
            marginRight:"10%",
        },600);

      } 

  });
});

我尝试添加此功能，但这只是打破它

   else {
        kevin.animate({
            marginLeft: "0%",
        },600);

        jq.animate({
            marginRight:"0%",
        },600);

      }

任何人都有解决方案吗？

Answer 1

这是因为之前的动画没有完成。使用queue: false来阻止动画链接。并使用marginLeft: null代替0%从style属性中删除margin属性。 Example

$(window).scroll(function() {
    if ($(this).scrollTop() > 1000) {
        $('div').animate({
            marginLeft: '10%'
        }, {
            queue: false
        });
    } else {
        $('div').animate({
            marginLeft: null
        }, {
            queue: false
        });
    }
});

另一种方法是使用.stop()或.finish()。但在这种情况下，你会在元素上松开另一个动画过程。 Example

$(window).scroll(function() {
    if ($(this).scrollTop() > 1000) {
        $('div').stop().animate({
            marginLeft: '10%'
        });
    } else {
        $('div').stop().animate({
            marginLeft: null
        });
    }
});

Scrolltop（）（无法反转动画）

1 个答案: