0

だから私はそれにホバーすることによって別の要素（ターゲット）の可視性を制御する要素（リンク）を持っています。マウスがリンクをホバーすると、ターゲットは表示に変わり、マウスが離れると、2秒後にターゲットは非表示になります。

ここまでは順調ですね。しかし、2秒が経過する前にマウスが表示されているターゲットにカーソルを合わせても、ターゲットが表示されたままになるようにするにはどうすればよいですか？

私はそれをsetTimeoutとclearTimeoutで動作させるようにしましたが、それは本当にバグがあり、まったく気分が良くありません。

var time = 1000;
$(".link").hover(

      function () {
        $('.target').css('display', 'none');
        clearTimeout($(this).data('timeout'));
          $('.target').css({'display': 'block'});
      },

      function () { 

        var timer = setTimeout(function() {$('.target').fadeOut(1000).delay(100).css('display', 'none'); clearTimeout(timer); }, time);

        $('.target').hover(
              function () {
                clearTimeout(timer);
              },
              function () {
                var timer = setTimeout(function() {$('.target').fadeOut(1000).delay(100).css('display', 'none'); clearTimeout(timer); }, time);
              }
            );        
      }

); ​

（http://jsfiddle.net/VfDkq/）

どんな助けでも大歓迎です。

乾杯

4

2 に答える 2

4

コードを少しリファクタリングしてみてください。

(function() {

    var time = 1000,
        timer;

    function handlerIn() {
        clearTimeout(timer);
        $('.target').stop(true).css('opacity', 1).show();
    }
    function handlerOut() {
        timer = setTimeout(function() {
            $('.target').fadeOut(3000);
        }, time);
    }

    $(".link, .target").hover(handlerIn, handlerOut);

}());

ライブデモ

これは、説明した動作に非常に近いはずです。mouseenterまた、に表示されているように、フェードアウトしているときにすぐに表示するための行を追加しましたhandlerIn。

私があなたのコードから取り除いたいくつかの間違い：

  • ハンドラーの1つで別のtimer変数が宣言されmouseleaveましたが、どこでもキャンセルできませんでした。はtimer、共通のスコープでアクセス可能である必要があります。
  • 同期メソッドの前にアニメーション遅延を適用していまし.cssたが、これは効果がありません。
  • displayが完了したnone後にに設定する意味はありfadeOutません。自動的に設定されます。
  • setTimeout実行後にクリアする意味もありません。
于 2012-11-02T18:29:44.893 に答える
0

遅延とフェードアウト期間が多すぎます。ブラウザはそれを好きではありません。それらの代わりにhide（）を使用してもよろしいですか？

http://jsfiddle.net/VfDkq/4/

  var timer = setTimeout(function() {$('.target').hide().css('display', 'none'); clearTimeout(timer); }

または、遅延時間とフェードアウト時間を減らすことができます。

于 2012-11-02T18:22:06.110 に答える