javascript - 割り込み電流遷移でのスムーズなコンテンツ遷移

Question

ナビゲーション リンクをクリックできるメニューがあります。jquery を使用して一部のコンテンツを変更しfadeOut、fadeIn

プライマリ: オンクリック

Link1 | Link2 | Link3

Content 1 | Content 2 | Content 3

すべてのリンクはすべてのコンテンツ要素を非表示にし、指定されたコンテンツ要素をフェードインします。

ここに問題があります
。ユーザーは、link3 よりも link1、link2 を非常に速くクリックします。
コンテンツ要素が完全にフェードアウトしていないか、他のコンテンツ要素がフェードインしています。

停止を使用できますが、これらはまったくスムーズではありません。フェードアウトが中断されている間もフェードアウトし続け、フェードインはフェードアウトする必要があるため、すべてがスムーズに表示されます。エレガントな方法はありますか？

これが、フェージングを今どのように解決したかです。

function showContent(contentId) {
   $(".content-elements").stop(true, true);
   return $when($(".content-elements").fadeOut(800)).then($(contentId).fadeIn(800));
}

更新: ここに小さなサンドボックスjsFiddleがあります

---

オプション: マウスオーバー

|BOX1|BOX2|BOX3|
Content 1 | Content 2 | Content 3

さらに、ユーザーが誤ってボックスに入った場合に遷移を防ぐために、ナビゲートする前に短いタイムアウトを設定するのが好きです。したがって、現在の要素のフェードアウトは 2 秒経過するまで待機する必要があり、マウスが現在ある要素をフェードインできます。