それで、これがコミュニティからの私の最初の質問です。
質問:アニメーションdiv
でホバーの幅を拡大して表示しようとしています。div
問題:jqueryとcss でこれを達成しましたが、問題はアニメーションを継続的にホバリングしても停止しないことです。したがって、マウスがdivの外に出たら、前のアニメーションをメモリからフラッシュしたいと思います。
使用したいものを検索して見つけましたstop()
が、希望する結果が得られません。
前もって感謝します!
それで、これがコミュニティからの私の最初の質問です。
質問:アニメーションdiv
でホバーの幅を拡大して表示しようとしています。div
問題:jqueryとcss でこれを達成しましたが、問題はアニメーションを継続的にホバリングしても停止しないことです。したがって、マウスがdivの外に出たら、前のアニメーションをメモリからフラッシュしたいと思います。
使用したいものを検索して見つけましたstop()
が、希望する結果が得られません。
前もって感謝します!
stop()
メソッドの前に使用する必要がanimate()
あります。次のことを試してください。
$('#slider_thumbnail li .slide_thumb').hover(function(e){
$(this).find('.slide_btn').stop().animate({width:240});
$(this).find('.image-wrapper').show('slow');
},function(e){
$(this).find('.slide_btn').stop().animate({width:125});
$(this).find('.image-wrapper').hide('slow');
});
私は以前にこの問題にhoverIntentプラグインを使用しましたが、非常にうまく機能しました。多分あなたはこれを試してみたいです:
それがあなたが望んでいたものではないことを感謝しますが、私は退屈でそれをやりたかったのです。
あなたが望むものの純粋なCSSバージョン:http://jsfiddle.net/fsF3W/5/
だから、答えてくれたみんなに感謝し、@Raminsonに特に感謝します。
私は読んで理解しようとしstop()
ましたそして最終的に私は私が欲しいものを理解しました
使用しましたstop(true, false)
trueは、キューに入れられたアニメーションを削除します。 falseは、アニメーションを最後までジャンプさせません
そしてそれはうまくいきました:デモ
Jqueryコード:
$('#slider_thumbnail li .slide_thumb').hover(function(e){
$(this).find('.slide_btn').stop(true, false).animate({width:240});
$(this).find('.image-wrapper').stop(true, false).show('slow');
},function(e){
$(this).find('.slide_btn').stop(true, false).animate({width:125});
$(this).find('.image-wrapper').stop(true, false).hide('slow');
});