2

それで、これがコミュニティからの私の最初の質問です。

質問：アニメーションdivでホバーの幅を拡大して表示しようとしています。div

問題：jqueryとcss でこれを達成しましたが、問題はアニメーションを継続的にホバリングしても停止しないことです。したがって、マウスがdivの外に出たら、前のアニメーションをメモリからフラッシュしたいと思います。

使用したいものを検索して見つけましたstop()が、希望する結果が得られません。

私がまだ達成したことを確認してください

前もって感謝します！

4

4 に答える 4

4

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');
});

デモ

于 2012-07-28T11:49:17.253 に答える
1

私は以前にこの問題にhoverIntentプラグインを使用しましたが、非常にうまく機能しました。多分あなたはこれを試してみたいです：

于 2012-07-28T11:49:22.917 に答える
0

それがあなたが望んでいたものではないことを感謝しますが、私は退屈でそれをやりたかったのです。

あなたが望むものの純粋なCSSバージョン：http：//jsfiddle.net/fsF3W/5/

于 2012-07-28T12:20:12.443 に答える
0

だから、答えてくれたみんなに感謝し、@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');
});​
于 2012-08-01T08:16:51.857 に答える