javascript - Scrolltop()(无法反转动画)

Question

嘿，我试图通过向左移动 10% 和向右移动 10% 来让 2 个 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
        });
    }
});