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）缩进样式，我发现它比大多数人使用的 BSD KNF 缩进样式更容易遵循... =P

编辑： 测试页面

4

2 回答 2

2

您是否碰巧切换700 and "easeOutExpo"了#closediv 的动画功能？如果切换它们，div 似乎向后滑动，但是当 #opendiv 出现时，它又回到了 left: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 回答