2

このhttp://jsfiddle.net/8ePKP/21/に問題 があります。リンクをクリックすると、アクティブなdivがfadeOutで消え、選択したdivがfadeInで表示されます。ただし、アニメーションは、前方クリックと後方クリックで動作が異なります。トランジションを常に同じにしたいのですが、これの何が問題になっていますか？

4

2 に答える 2

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 に答える
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 に答える