javascript - jquery animate を 1 回だけ実行する

Question

私は次の機能を持っています：

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

div を切り替えて、ページを下にスクロールします。問題は、ユーザーがページを下にスクロールするたびに、最初のクリックでのみこのアニメーション機能を実行するにはどうすればよいですか?

score 12 · Accepted Answer

フラグを使用するか、データ属性を設定して、スクロールアニメーションが最初のクリックでのみ発生するようにします。

var flag=true;

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

まだトグルする#div2必要があると思いますが、クリックするたびにスクロールするべきではありませんか?

score 3 · Accepted Answer

jQuery .one() http://api.jquery.com/one/

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

score 1 · Accepted Answer

関数を使用して、.one一度だけ発生するイベントをバインドします。

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

score 0 · Accepted Answer

以下は 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. */

アニメ化する際の参考にしてみてはいかがでしょうか。;)

score -1 · Accepted Answer

ハンドラーの最後でそのクリックハンドラーのバインドを解除して、二度とトリガーされないようにすることができます。

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

score -1 · Accepted Answer

フラグを使用する

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

score -1 · Accepted Answer

この方法でクリックが初めて発生したかどうかを確認するために、単純な「トークン」を保存できます。

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

これにより、それ以上のクリックが防止されます

score -1 · Accepted Answer

これでできるはず

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

javascript - jquery animate を 1 回だけ実行する

8 に答える 8

Related

Reference