在滾動觸發器後運行.animate（）一次

Question

我有一個div我想在觸發div和窗口頂部之間達到一定距離後動起來一次，但是在.scroll（）函數內時滾動時不斷觸發動畫。

這下面的代碼工作正常：

$(window).scroll(function(){ 
    var a = $('.intro-text').offset().top; 
    console.log(a); 

    if (a > 100) { 
    $('.hide-me').fadeOut(); 
    } else if (a < 100) { 
    $('.hide-me').fadeIn(); 
    } 

}); 

但如果我將它更改爲.animate（），它不斷地排隊，並永遠需要運行：

$(window).scroll(function(){ 
    var a = $('.intro-text').offset().top; 
    console.log(a); 

    if (a > 100) { 

    $('.hide-me').animate({ 
     left: -200 
    }, 1000); 

    } else if (a < 100) { 

    $('.hide-me').animate({ 
     left: 0 
    }, 1000); 

    } 

}); 

我的編碼技能AREN」盡我所能，但我希望在進入任何外部庫或插件之前瞭解jQuery /純JavaScript中是否有函數。任何幫助將不勝感激，謝謝。

Answer 1

創建scroll對象，並保存兩個標誌fadeIn和fadeOut

var scroll = { 
      fadeIn: false, 
      fadeOut: false 
}; 

說明

內，您的滾動事件有兩個條件a>100和a<100

所以，一旦的一個條件是真實的，它進入並檢查標誌是否在觸發前設置然後將動畫的標誌設置爲true並清除另一個標誌。

例如：

if (a > 100) { 
    if (!scroll.fadeOut) { 
     $('.hide-me').fadeOut(); 
     scroll.fadeOut = true; 
     scroll.fadeIn = false; 
    } 
    } 

在上面的代碼

它檢查如果未設置scroll.fadeOut然後

它動畫

$('.hide-me').fadeOut(); 

，並設置標記

scroll.fadeOut = true; 
scroll.fadeIn = false; 

這將不允許再次執行該動畫，直到第二個動作被觸發並清除標誌。

全部JS

var scroll = { 
     fadeIn: false, 
     fadeOut: false 
}; 

$(window).scroll(function() { 
    var a = $('.intro-text').offset().top; 
    console.log(a); 

    if (a > 100) { 
    if (!scroll.fadeOut) { 
     $('.hide-me').fadeOut(); 
     scroll.fadeOut = true; 
     scroll.fadeIn = false; 
    } 
    } else if (a < 100) { 
    if (!scroll.fadeIn) { 
     $('.hide-me').fadeIn(); 
     scroll.fadeIn = true; 
     scroll.fadeOut = false; 
    } 
    } 

}); 

UPDATE

var scroll = { 
    fadeIn: false, 
    fadeOut: false 
}; 

$(window).scroll(function() { 
    var a = $('.intro-text').offset().top; 
    console.log(a); 

    if (a > 100) { 
    if (!scroll.fadeOut) { 
     $('.hide-me').animate({ 
     left: -200 
     }, 1000); 
     scroll.fadeOut = true; 
     scroll.fadeIn = false; 
    } 
    } else if (a < 100) { 
    if (!scroll.fadeIn) { 
     $('.hide-me').animate({ 
     left: 0 
     }, 1000); 
     scroll.fadeIn = true; 
     scroll.fadeOut = false; 
    } 
    } 

}); 

Answer 2

在這些情況下，您可以使用jQuery .stop([clearQueue],[jumpToEnd])方法，如：

function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
    var context = this, 
     args = arguments; 
    var later = function() { 
     timeout = null; 
     if (!immediate) func.apply(context, args); 
    }; 
    var callNow = immediate && !timeout; 
    clearTimeout(timeout); 
    timeout = setTimeout(later, wait); 
    if (callNow) func.apply(context, args); 
    }; 
}; 

$(window).scroll(function() { 
    debounce(function() { 
    var a = $('.intro-text').offset().top; 
    console.log(a); 
    if (a > 100) { 
     $('.hide-me').stop(true, true).animate({ 
     left: -200 
     }, 1000); 
    } else if (a < 100) { 
     $('.hide-me').stop(true, true).animate({ 
     left: 0 
     }, 1000); 
    } 
    }, 50); 
}); 

如果超過一個靈魂在相同的元素上調用方法，後面的動畫放置在元素的效果隊列中。這些動畫直到第一個動畫完成纔會開始。當調用.stop()時，隊列中的下一個動畫立即開始。如果clearQueue參數的值爲true，那麼隊列中的其餘動畫將被刪除並永不運行。