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