1

ページのドロップダウンなどのメニューにjqueryのfadeIn/Outを実装しました。

ホバーしないので、クリックする必要があります。理由もなく何度も何度もクリックする場合を除いて、問題なく動作します。

私が設定した方法は、クリック時にメニューバーの高さを（他のdivをフェードイン/アウトしながら）増やして、レイアウトのすべての部分の周りに4pxの境界線を視覚的に実現することです。

繰り返しクリックすると（ADDで12歳の過活動、またはすべてをダブルクリックするおばあさんと言ってください）、フォーマットが混乱する可能性があります。

これに対する解決策はありますか？

HTML：

<a class="springtrail_link stadd" href="#" id="add" data-hidden="1" data-lastid="<?php echo $lastid ?>">Change Category</a>

JS：

$('.stadd').live('click', function(){
        var hidden = $(this).data('hidden')
        var lastid = $(this).data("lastid");
        var divid = "#suggested";
        if (hidden == 0)
        {
            hide(divid)
            $('.stadd').data('hidden', '1');
        } else
        {
            buildsuggested(lastid);
            show(divid);
            $('.stadd').data('hidden', '0');
        }
});  

function show(divid) {
    $(divid).slideDown('fast');
    var stheight = $('#springtrail').height();
    var pxheight = stheight + 4;
    $('#springtrail').animate({height: pxheight+'px'});
    $('#springtrail').css( 'border-bottom-left-radius' , '0px');
    $('#springtrail').css( 'border-bottom-right-radius' , '0px');
}

function hide(divid) {
    $(divid).fadeOut('fast');
    var stheight = $('#springtrail').height();
    var pxheight = stheight - 4;
    $('#springtrail').animate({height: pxheight+'px'});
    $('#springtrail').css( 'border-bottom-left-radius' , '4px');
    $('#springtrail').css( 'border-bottom-right-radius' , '4px');
}
4

1 に答える 1

2

あなたはコードを投稿していないので、あなたの問題はキューに入れられたアニメーション効果に関連している可能性があると思います.

次のような基本的な HTML があるとします。

<button type="button" id="in">In</button>
<button type="button" id="out">Out</button>
<br/>
<img id="book" src="http://placehold.it/350x150" alt="" width="100" height="123" />

そして、次のような基本的なスクリプト：

$('#in').click(function() {
    $('#book').fadeIn('slow', function() {});
});

$('#out').click(function() {
    $('#book').fadeOut('slow', function() {});
});

デモ- 毎回キューに入れられるアニメーション効果

ここでの問題は、クリックするたびにフェード効果が実行されるため、両方のボタンを非常に速くクリックするとキューが発生することです。このキューは、クリックして完了するのをやめた後も実行され続けるため、シナリオによっては望ましくない結果が生じる可能性があります。

この動作を防ぐには、jQuery の stop()メソッドを使用して現在のアニメーションを停止します。これに似ています：

$('#in').click(function() {
    $('#book').stop(true, true).fadeIn('slow', function() {});
});

$('#out').click(function() {
    $('#book').stop(true, true).fadeOut('slow', function() {});
});

デモ- アニメーション効果の停止

これにより、次のアニメーションを開始する前にアニメーションを確実に停止し、これらの望ましくない結果のいくつかに対処できるようになりました。

true, trueを呼び出すときの引数の詳細については、上記のリンク先のドキュメントを参照してくださいstop()。

于 2013-01-03T14:16:28.257 に答える