1

フィドル。

関連コード（フィドルでも注釈付き）：

// tooltip positioning on hover and overlay fade on all li's except for submenu items that are not the last child
$("ul:not(.sub-menu) > li, ul.sub-menu > li:last-child").not(":has(ul.sub-menu)").hover(function () {
  var $this = $(this),
    title = $(this).children("a").data("title"),
    posL = $this.offset().left + ($this.width() / 2),
    posT = $this.height(),
    tooltip = $("#tooltip"),
    overlay = $("#overlay");

  $this.addClass("over-down");
  overlay.stop(true).fadeIn("slow"); // RELEVANT FOR QUESTION
  tooltip.stop(true, true).text(title).animate({ // RELEVANT FOR QUESTION
    "left": posL - (tooltip.width() / 2),
      "top": posT + $this.offset().top + 20
  }, 300).fadeIn("fast");
}, function () {
  var $this = $(this),
    tooltip = $("#tooltip"),
    overlay = $("#overlay");

  $this.removeClass("over-down");
  overlay.stop(true).fadeOut("slow"); // RELEVANT FOR QUESTION
  tooltip.stop(true).fadeOut(400); // RELEVANT FOR QUESTION
});

フィドルで、アイテムの上にカーソルを置いてから、しばらく離れて別のアイテムにカーソルを合わせてみてください。スパン#overlayと同様に、div が部分的にフェードアウトしていることがわかります。#tooltip私が望むのは、2 つの間のスムーズな遷移であるため、通常、ツールチップとオーバーレイは再び 100% にフェードインする必要がありますが、そうではありません。私はそれをいじっています.stop()が、何もうまくいかないようです。

この問題は、テストしたすべてのブラウザー (IE10、FF、Chrome) で発生します。

4

1 に答える 1

1

.stop(true)途中でアイテムfadeOutがセットされないdisplay:noneので、次fadeInは効果がありません。

考えられる解決策は 2 つあります。

.stop(true, true)の前に使用すると、要素fadeInが突然強制されるため、aが連続して有効になります。これは非常にスムーズな解決策ではありません。フィドルdisplay:nonefadeIn

別の解決策は、fadeToの代わりに使用することですfadeIn。fadeToと同様に不透明度をアニメーション化しますfadeInが、display:none要件はありません。非表示の要素に対しても機能し、次のようにフェード インしますfadeIn。

$this.addClass("over-down");
overlay.stop(true).fadeTo(600, .75); //edited here
tooltip.stop(true, true).text(title).animate({ //here*
    "left": posL - (tooltip.width() / 2),
    "top": posT + $this.offset().top + 20
}, 300).fadeTo(200, 1); //and here

フィドル

これは、よりスムーズなソリューションです。現在の不透明度や表示とは関係なく、要素を適切にアニメーション化して.75不透明度に戻します。

* ツールチップに を追加して、キュー.stop(true, true)に入っている間中途半端にならないようにしました。fadeToそのようなものをスライドさせたい場合は、次を試してください。

var do_dequeue = tooltip.is(':visible');
tooltip.stop(true).text(title).animate({ // RELEVANT FOR QUESTION
    "left": posL - (tooltip.width() / 2),
    "top": posT + $this.offset().top + 20,
}, 300).fadeTo(200, 1);
if (do_dequeue) tooltip.dequeue();

フィドル

変数は、移動を準備する前にツールチップが部分的にフェードされたdo_dequeueかどうかを追跡してから、キューをフェードします。部分的にフェードされている場合は、ツールチップが要素の下に配置されるのを待たずに完全な不透明度にフェードバックします。これでやっとスムーズになると思います。=]

于 2013-01-11T20:06:51.670 に答える