jQuery滾動時可見

我嘗試使用jQuery visible插件來檢測元素是否在視口中可見。我用這樣的代碼：jQuery滾動時可見

animateFrontPage: function(){ 
    var apps = 0; 
    if($('#apps-shelf').visible(true)) { 
     apps = 1; 
     if(apps == 1) { 
      $('#apps-shelf li').velocity("transition.bounceUpIn", { stagger: 150 }); 
      apps = 0 
     } 
    } 
}

和我一起滾動功能運行：

$(window).scroll(function() { 
    Functions.animateFrontPage(); 
});

的問題是 - 動畫重演每滾動。我能做些什麼來防止它？

來源

2014-07-08 Tomek Buszewski

你可以使用一個標誌。一旦動畫完成一次，將其設置爲true，並且只有標誌爲假時才動畫。 – nick

我相信我做到了。但它重置滾動。如果你的意思是別的，請發表一個例子。 –

你想讓動畫只發生一次嗎？所以如果你滾動，看到動畫，滾動，然後回滾 - 你只能看到它一次？ – nick

如果你只想讓動畫顯示一次，你可以做的是向元素添加一個類來標記它已經完成 - 然後每次你只有在動畫元素沒有這個類時才執行動畫。也許東西沿着這些線路：

animateFrontPage: function(){ 
    var $el = $('#apps-shelf'); 
    if($el.visible(true) && !$el.hasClass('finished')) { 
     $el.addClass('finished'); 
     $el.find('li').velocity("transition.bounceUpIn", { stagger: 150 }); 
    } 
}

更新

這是你，如果你想在其他動畫在這些條件下運行需要else語句：一）的第一個元素$('#apps-shelf')動畫已經發生並且b）元素$('#apps-shelf')在屏幕上不再可見（例如，您已滾動過去）

animateFrontPage: function(){ 
    var $el = $('#apps-shelf'); 
    if($el.visible(true) && !$el.hasClass('finished')) { 
     $el.addClass('finished'); 
     $el.find('li').velocity("transition.bounceUpIn", { stagger: 150 }); 
    } else if (!$el.visible(true) && $el.hasClass('finished')){ 
     //other animation here 
    } 
}

來源

2014-07-08 15:04:50 nick

好的，那可行，但如果我想讓它在觸發時觸發其他動畫？嘗試添加'else removeClass'，但它運行循環。 –

我已經更新了上面的答案。我假設「什麼時候消失」，你的意思是說，當我們有動畫的原始元素離開了屏幕？如果不是，請詳細解釋一下。但希望上面的更新應該是你以後的=） – nick

jQuery滾動時可見

回答

相關問題