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%從樣式屬性中刪除邊距屬性。 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 
     }); 
    } 
});