0

画面の端から始まり、タブがクリックされると右にスライドする非表示のdivを作成しています。この部分は期待どおりに機能しますが、タブをクリックしてスライドさせて戻すと、機能しません...何かアイデアはありますか？

JS：

$( "#closediv" ).hide();
$( "#opendiv" ).click( function(){
    $( "#opendiv" ).animate(
        { left: "+=100px" },
        700,
        "easeOutExpo",
        function(){
            $( "#opendiv" ).hide();
            $( "#closediv" ).show();
        }
    );
});

$( "#closediv" ).click( function(){
    $( "#closediv" ).animate(
        { left: "-=100px" },
        "easeOutExpo",
        700,
        function(){
            $( "#opendiv" ).show();
            $( "#closediv" ).hide();
        }
    );
});

CSS：

#closediv
  {
   display: block;
   width: 30px;
   height: 95px;
   text-indent: -9999px;
   overflow: auto;
   background: url('/aaron.chauvin/sitepics/closediv.png') bottom;
  }

#closediv:hover
  {
   background-position: 0 0;
  }

#opendiv
  {
   opacity: 0.6;
   display: block;
   width: 30px;
   height: 95px;
   text-indent: -9999px;
   overflow: auto;
   background: url('/aaron.chauvin/sitepics/opendiv.png') bottom;
  }

#opendiv:hover
  {
   background-position: 0 0;
  }

HTML：

<div id="opendiv" style="position:absolute; top:0px; left:0px; z-index:2;">
</div>
<div id="closediv" style="position:absolute; top:0px; left:100px; z-index:2;">
</div>

私の「ブロック」（変更されたK＆R）インデントスタイルについて申し訳ありませんが、ほとんどの人が使用するBSDKNFインデントスタイルよりもわかりやすいと思います...= P

編集： テストページ

4

2 に答える 2

2

700 and "easeOutExpo"#closedivのアニメーション関数に切り替えましたか？それらを切り替えると、divは後ろにスライドしているように見えますが、＃opendivが表示されると、左に戻ります：100これを修正するには、次を使用できます。

$("#closediv").hide();
$("#opendiv").click(function(){
    $(this).animate({ left: "+=100px" }, 700, "easeOutExpo",function() {
    $(this).hide();
    $("#closediv").show().css('left', 100);
    });
});

$("#closediv").click(function(){
    $(this).animate({ left: "-=100px" }, 700, "easeOutExpo", function() {
    $("#opendiv").css('left', 0).show();
    $("#closediv").hide();
    });
});

これがJSFiddleリンクです：http：//jsfiddle.net/RWnqW

于 2011-06-25T19:03:55.610 に答える
1

http://jsfiddle.net/BqJeg/5/を使用すると、より動的になります。

$( "#closediv" ).hide();
$( "#opendiv" ).click( function(){
    $( "#opendiv" ).animate(
        { left: "+=100px" },
        700,
        "easeOutExpo",
        function(){
            $( "#closediv" ).css('left', $( "#opendiv" ).css('left'));
            $( "#opendiv" ).hide();
            $( "#closediv" ).show();
        }
    );
});

$( "#closediv" ).click( function(){
    $( "#closediv" ).animate(
            { left: "-=100px" },
        700,
        "easeOutExpo",
        function(){
            $( "#opendiv" ).css('left', $( "#closediv" ).css('left'));
            $( "#opendiv" ).show();
            $( "#closediv" ).hide();
        }

    );
});
于 2011-06-25T19:09:32.653 に答える