Question

我对此http://jsfiddle.net/8ePKP/21/有疑问单击链接时，我希望活动div与fadeOut一起消失，选中的div显示为fadeIn.But动画在前进和后退点击时的工作方式不同。我希望转换始终相同。这有什么问题？

Answer 1

您的网页需要绝对定位才能堆叠。

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

否则你必须等到上一页完全消失后再淡入下一页。

Answer 2

使用此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/

jQuery fadeIn fadeOut总是以相同的方式工作

2 个答案: