等待，直到發生一個事件，然後再移動到下一個

Question

我目前有一個滾動錨點動畫，它還向被點擊的錨點添加了一個「活動」類。我試圖將下面的函數也納入到工作中，所以說有人點擊「錨點1」，「錨點1」會得到一個活動類，窗口將滾動到該位置。但是，在發生這種情況後，用戶手動開始向下滾動頁面，我希望刪除活動類。我現在遇到的問題是，當發生點擊錨點的滾動動畫時，下面的函數會發生。只有當窗口從點擊的錨點滾動時，我怎樣才能禁用它？

$(window).scroll(function() { 
    $('a[href^=#]').removeClass('active'); 
}); 

這是我正在使用的滾動錨腳本。

/******* 

    *** Anchor Slider by Cedric Dugas *** 
    *** Http://www.position-absolute.com *** 

    Never have an anchor jumping your content, slide it. 

    Don't forget to put an id to your anchor ! 
    You can use and modify this script for any project you want, but please leave this comment as credit. 

*****/ 

jQuery.fn.anchorAnimate = function(settings) { 

    settings = jQuery.extend({ 
     speed : 500 
    }, settings); 

    return this.each(function(){ 
     var caller = this 
     $(caller).click(function (event) { 
      event.preventDefault() 
      var locationHref = window.location.href 
      var elementClick = $(caller).attr("href") 

      var destination = $(elementClick).offset().top; 
      $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, 'easeOutCubic', function() { 
       window.location.hash = elementClick 
      }); 
      return false; 
     }) 
    }) 
} 

最後，我的jQuery

// Scrolling Anchors 

$('[href^=#]').anchorAnimate(); 

// Active Class For Clicked Anchors 

var anchorscroll = $('a[href^=#]') 

anchorscroll.click(function(){ 
var anchorlocation = $(this).attr("href"); 
    anchorscroll.removeClass('active'); 
    $(this).addClass('active'); 
    $('a[href='+anchorlocation+']').addClass('active'); 
}); 

Answer 1

嘗試改變插件像這樣（添加的行標）：

jQuery.fn.anchorAnimate = function (settings) { 

    settings = jQuery.extend({ 
     speed: 500 
    }, settings); 

    var scrollFn = function() { // added 
     $('[href^=#]').removeClass('active'); 
     $(window).unbind('scroll', scrollFn); 
    } 

    return this.each(function() { 
     var caller = this 
     $(caller).click(function (event) { 
      event.preventDefault() 
      var locationHref = window.location.href 
      var elementClick = $(caller).attr("href") 

      var destination = $(elementClick).offset().top; 
      $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination }, settings.speed, 'easeOutCubic', function() { 
       window.location.hash = elementClick 
       $('[href^=#]').removeClass('active'); // added 
       $('[href^=' + elementClick + ']').addClass('active'); // added 
       $(window).scroll(scrollFn); // added 
      }); 
      return false; 
     }) 
    }) 
} 
$(document).ready(function() { 
    $('[href^=#]').anchorAnimate(); 
}); 

編輯： 說明：

動畫方法需要回調作爲其最終參數。此動畫在動畫完成後稱爲。見http://api.jquery.com/animate/。

所以在主播點擊動畫就會開始。當它結束時，它會改變window.location.hash（原始插件代碼）

然後它會從指向這個文檔的所有鏈接中刪除「活動」類（對於用戶點擊鏈接而不滾動的情況）。

則反而會加重「活動」類的錨該用戶剛剛點擊

最後它會綁定一個事件處理窗口滾動。通過之後動畫，我們確保它在動畫期間不會觸發。

現在，當用戶使用鼠標或鍵滾動時，我們的事件處理程序被觸發。我們從所有鏈接中移除活動類並解除綁定處理程序，以便在用戶單擊另一個鏈接之前不會再次調用它。

單擊另一個鏈接時，重複整個過程。