0

我有一个菜单，我可以在其中单击导航链接。我使用 jquery 更改了一些内容fadeOut，fadeIn

主要：OnClick

Link1 | Link2 | Link3

Content 1 | Content 2 | Content 3

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

问题出在这里：
用户在链接 1、链接 2 上的点击速度比在链接 3 上的点击速度非常快。
内容元素未完全淡出或其他内容元素淡入。

我可以使用停止，但这些都不会顺利。它应该在淡出被中断时继续淡出，淡入应该淡出，所以一切看起来都很顺利。有没有优雅的方法。

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

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

另外，如果用户不小心输入了一个框，我喜欢在导航之前有一个小的超时，以防止转换。所以当前元素的fadeOut应该等到2秒过去后才能淡入鼠标当前所在的元素。

4

0 回答 0