中断电流转换时平滑内容转换

Question

我有一个菜单，我可以点击导航链接。我使用jquery fadeOut，fadeIn

更改了一些内容

主要：OnClick

Link1 | Link2 | Link3

Content 1 | Content 2 | Content 3

每个链接都隐藏所有内容元素并淡入指定的内容元素。

问题在于：
用户在link1，link2上非常快速地点击，而不是在link3上。
内容元素未完全淡出或其他内容元素淡入。

我可以使用停止，但这些根本不会流畅。当淡出中断并且淡入淡出应该淡出时它应该继续淡出，所以一切都显得平滑。有一种优雅的方式。

这是我现在如何解决褪色的功能。

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

更新：这是一个小沙箱jsFiddle

---

可选：MouseOver

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

附加我喜欢在导航之前有一个小超时，以防止用户意外输入一个盒子时进行转换。因此，当前元素的fadeOut应该等到2秒后消失并且可以淡化鼠标当前所在的元素。