僅執行一次jquery動畫

Question

我有以下功能：

$('.link1').click(function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});

它切換div並向下滾動頁面。 問題是，每次用戶切換頁面再次向下滾動時...我怎么能只在第一次點擊時運行這個動畫功能？

Answer 1

使用標志或設置數據屬性以確保滾動動畫僅在第一次單擊時發生。

var flag=true;

$('.link1').click(function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    if (flag) {
        $('html, body').animate({scrollTop: '600px'}, 800);
        flag = false;
    }
});

我猜#div2應該仍然切換，但它不應該在每次點擊時滾動？

Answer 2

jQuery .one（） http://api.jquery.com/one/

$('.link1').one( 'click', function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});

Answer 3

使用.one函數綁定僅觸發一次的事件。

$('.link1').one('click', function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});

Answer 4

以下適用於JQuery。

使用的CSS：

.cpos {
    position: relative;
    top: -1.65em;
    left: 1.8em;
}

使用的JQuery：

var p=null; /* Initialize variable p. */
p=$("b").detach(); /* Detach every possible <b>b</b>-tags. */
var p=$("<b>Console loaded!</b>").addClass("cpos"); /* Do anything, like adding class. */
p.appendTo("#container"); /* Append new data to the anchor container. */

也許您可以在動畫時使用它作為參考。 ;）

Answer 5

您可以解除處理程序末尾的單擊處理程序，以便它永遠不會再次觸發：

$('.link1').off('click');

Answer 6

使用旗幟

var noRun = 0
$('.link1').click(function(){
    if(noRun==1) {
      return
     }
     noRun = 1  
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});

Answer 7

您可以保存一個簡單的“令牌”來檢查是否是第一次以這種方式觸發點擊：

$('.link1').click(function(){ 
    if(!$(this).data('isFirstTime')) {
        $("#div2").slideUp(function(){$("#div1").slideToggle();}); 
        $('html, body').animate({scrollTop: '600px'}, 800); 
        $(this).data('isFirstTime', true);
    }
}); 

這可以防止進一步點擊

Answer 8

這應該做到這一點

(function(){
    var first=true;
    $('.link1').click(function(){
        if (first){
            first=false;
            $("#div2").slideUp(function(){$("#div1").slideToggle();});
            $('html, body').animate({scrollTop: '600px'}, 800);
        }
    });
})();