Question

我有一个宽度为300px的导航div。单击链接时，顶级菜单应向左滑动，相应的链接div应该滑入。我有这个工作，但有一个时刻，从顶部导航菜单的区域向左淡出的内容仍然可见新内容滑入。

我正在尝试消除这个差距，我不得不在代码中添加一个延迟，以阻止它在顶部菜单下加载，然后“跳跃”，这看起来不太好。

可以在此处找到该页面：http://projects.dabbble.com/wordcloud/ - 点击链接查看问题。

这个（在加载jQuery和jQuery UI插件之后）的JS就在这里：http://projects.dabbble.com/wordcloud/lib/js/wordcloud.js?v=0.7

jQuery对我来说不是一个强项，所以代码可能会被整理得非常多，但是非常感谢任何/所有帮助！

詹姆斯

Answer 1

对于一个函数，你需要在你的html标记中添加类，并为每个链接项添加一个title属性，以便它知道要向右滑动的div： -

// Hide Sub Menus on Load
$(".wordcloud-menu").hide();

$(".menu-item").click(function(){

var selectElement = $(this).attr("title");

    $(this).hide("slide", { direction: "left" }, 500);
    // Hide Sub Menus on Load
    $(selectedElement).delay("500").show("slide", { direction: "right" }, 500);
    return false;

});

建议使用隐藏的动画和CSS溢出。例如;

$(selectedElement + ":hidden").show().animate({"right": "+=300px"}, "650");

Answer 2

如果我理解你想要实现的目标，你应该尝试以下方法：

转到小节：

.show（）小节
将＃wordcloud-sections向左移动 300像素

返回主要部分：

将＃wordcloud-sections向右移动300px

这对你有意义吗？

jQuery显示/隐藏在相同的内容区域内没有间隙

2 个答案: