1

http://jsfiddle.net/jmPCt/18/

私はJSとjQueryを初めて使用します。上記のリンクですべてのコードを手動で記述しました。それは機能し、私が保存したいことをしますが、1つのことです。「次へ」リンクをすばやくクリックすると、次のコンテナが一瞬表示されます。または、十分にすばやくクリックすると、コードは 2 つのコンテナを表示しますが、一度に 1 つだけ表示したいのです。jQueryでこれを処理する方法はありますか? ここで説明したように、停止を使用してみました: How to prevent jquery hover event from fire when not complete? しかし、これは問題を解決しません。

4

1 に答える 1

2

を探してい.stop()ます。目的の動作に合わせて実装が変更されますが、ドキュメントでそれが明確になるはずです: http://api.jquery.com/stop

ここにデモがあります：http://jsfiddle.net/jmPCt/19/

どのように機能するかにより、またはアニメーションを.stop()使用すると、アニメーションが機能しなくなるまで切り詰めることができます。私が見つけた最良の修正は、常に絶対値にアニメーション化することです: http://api.jquery.com/fadeTo.fadeIn().fadeOut().fadeTo()

JSFiddle に追加したコードは次のとおりです。これにより、デフォルトの関数.fadeIn()と.fadeOut()jQuery 関数が and を使用する関数で.fadeTo()上書きされ.stop()ます。

$.fn.fadeOut = function (duration, callback) {
    $(this).stop().fadeTo(duration, 0, function () {
        $(this).css('display', 'none');
        if (typeof callback == 'function') {
            callback();
        }
    });
};
$.fn.fadeIn = function (duration, callback) {
    $(this).css('display', 'block').stop().fadeTo(duration, 1, function () {
        if (typeof callback == 'function') {
            callback();
        }
    });
};

アップデート

「スライド」要素のプロパティを設定するpositionと、それらはお互いの上にアニメーション化され、コードが示す飛び跳ねを取り除くことができます:

HTML --

<div id="controls">
    <div id="countah"></div>
    <a href="#" id=prev>prev</a> | 
    <a href="#" id=next>next</a>
</div>

CSS --

.js .staceyPort {
    display: none;
    position : absolute;
    top      : 0;
    left     : 0;
}

#controls{ 
    position   : fixed;
    bottom     : 0;
    left       : 0;
    z-index    : 1000;
    background : gold;
}​

ここにデモがあります：http://jsfiddle.net/jmPCt/21/

于 2012-04-11T22:25:42.847 に答える