jQuery fadeIn fadeOut 并不总是以相同的方式工作答案

【问题标题】：jQuery fadeIn fadeOut doesn't work always in the same wayjQuery fadeIn fadeOut 并不总是以相同的方式工作
【发布时间】：2012-09-07 15:02:35
【问题描述】：

我对这个http://jsfiddle.net/8ePKP/21/ 有疑问单击链接时，我希望活动 div 会随着 fadeOut 消失，选择的 div 会随着 fadeIn 出现。但是动画在向前和向后点击时的工作方式不同。我希望过渡始终相同。这有什么问题？

【问题讨论】：

关闭页面容器上的overflow:hidden;，你会看到发生了什么。

标签： jquery html jquery-animate

【解决方案1】：

使用这个 CSS：

.pages_of_menu{
    position: absolute;
    display: none;
}

.pages_of_menu.active {
    display: block;
}

你的 JS 是对的，但它可以像这样变得更好：

$(document).ready(function() {

    var menu_index=-1;
    var menu_pages=$(".pages_of_menu");

    $("#left_panel_div a").click(function(){
          menu_index=$(this).parent('li').index();
          menu_pages.fadeOut(500);
          $($(".pages_of_menu").get(menu_index)).fadeIn(500);
    });

});

演示：http://jsfiddle.net/K5bbL/

【讨论】：

感谢@Shankar Cabus，它现在非常有用。但有一点我不明白。我编辑了你的代码jsfiddle.net/K5bbL/6 $(menu_pages.get(menu_index)).fadeIn(1000);在这部分，浏览器如何理解哪个div在哪个索引中？
@SedatKURT，$(".pages_of_menu") 返回一个包含 3 个 <li> 的数组，并且您已经知道点击元素的索引，只需检索它。

【解决方案2】：

您的页面需要绝对定位，以便它们堆叠。

http://jsfiddle.net/8ePKP/23/

.pages_of_menu{
    margin: 0px;
    padding: 0px;
    height: 200px;
    width: 150px;
    position: absolute;
}

否则，您必须等到上一页完全淡出后才能淡入下一页。

【讨论】：

谢谢伙计。它工作得很好。但我必须问，.stop(true,true) 到底在做什么？
这可以防止您的动画在您快速单击链接时无休止地排队。尝试删除它们并快速一遍又一遍地点击链接。