2

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

4

2 回答 2

0

使用这个 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/

于 2012-09-07T15:20:06.747 回答
0

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

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

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

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

于 2012-09-07T15:05:14.173 回答