2

私はこのようなことをしていますhttp://jsfiddle.net/8ErSL/2/

テキストボックス（div）にカーソルを合わせると、その中に小さなアイコンが表示されます。

アイコンのフェード効果が、誤ってdivにカーソルを合わせた回数だけ繰り返されないようにしたかったのですが、これはちょっと面倒です。追加することでこれを防ぐ方法があったことを私は知っています、.stop()そしてそれは魅力のように働きました。

.delay(500)しかし、を追加してアイコンの表示を遅らせようとする.stop()と、役に立たなくなり、div間でカーソルを動かし続けると、フェード効果が繰り返され続けます。

この問題を無効にするにはどうすればよいですか？フェード効果の繰り返しを遅らせて防ぐ必要があります。

ありがとう

4

2 に答える 2

0

これを読んでください：http：//forum.jquery.com/topic/stop-does-not-clear-delay

http://bugs.jquery.com/ticket/6255

これは役立つかもしれません：delay（）またはstop（）によるタイムアウト？

私が理解しているように、stop（）は遅延をクリアできません。これは、遅延に関するドキュメントからのものです。

.delay（）メソッドは、キューに入れられたjQueryエフェクト間の遅延に最適です。制限があるため（たとえば、遅延をキャンセルする方法はありません）、.delay（）はJavaScriptのネイティブsetTimeout関数の代わりにはなりません。これは、特定のユースケースに適している場合があります。

:)また、私があなたの質問を完全に誤解した場合は、この投稿が削除されることを知っておいてください。お役に立てれば

于 2012-07-09T11:38:24.700 に答える
0

私はあなたがこのようなことを試みるかもしれないと思います。

var $prev;   
$(".codebox").hover( function() {
   var $icon = $(".icon", this);
   if ($prev) {
      $prev.stop(true)
           .delay(500).fadeOut('fast'); // so animation will be shown here as well
   }        
   $icon.delay(500).fadeIn("fast");
   $prev = $icon;
}, function() {
   $(".icon", this).delay(500).fadeOut("fast");
} );

デモ。

重要なのは、マウスが別のブロックに入ると、ブロックのアイコンを強制的に非表示にすることです。'leave'では実行できません（マウスが1つの領域を離れるだけで、別の領域に移動しないとアニメーションが台無しになるため）が、'previous'を保存すると、次の'enter'イベントで実行できます。ある種のキャッシュのアイコン。

更新別の、はるかに簡単な方法があります：

$(document).ready( function () {
    $(".codebox").hover( function() {
       $(".icon", this).delay(500).fadeIn("fast");
    }, function() {
       $(".icon", this).stop(true).delay(500).fadeOut("fast");
    } );
});

...マウスがブロックを通過したときに、そのブロックがまったく強調表示されないことを気にしない場合。）。

于 2012-07-09T11:40:15.720 に答える