Question

以下脚本应该使div滑动到'left 300px'的绝对位置。目前，脚本的行为类似于显示/隐藏切换。 div只是在水平和垂直方向上都会缩小，直到它消失，而在第二次点击时则相反。它不能平滑地滑出屏幕。

任何线索？我从这里阅读类似的例子中得到了大部分代码。我很确定这是逐字的。

<script>
$(document).ready(function(){
    $(".clickertest").click(function(){
        var panel = $('#sidebar');
        var originalPos = panel.css("left");
        panel.toggle(function() {
            $('#sidebar').stop().animate({left:"-300px"},400);
          },
          function() {
            $('#sidebar').stop().animate({left:originalPos},400);
          });
     });
});
</script>

这是div的当前CSS。注意：我正在使用@media查询，但目前它们对于这个特定的div都是一样的。这可能会填补它吗？

#sidebar {
    background-color: #3A3A3A;
     left:0px; 
     top:105px; 
     width:300px; 
     bottom:0px; 
     position:absolute; 
     overflow:scroll; 
     z-index:1000;
}

Answer 1

自jQuery 1.8 link以来，

toggle（）已被弃用。您使用的是什么版本的jQuery？

Answer 2

更新：如下所述，jQuery不再支持切换功能。

旧（我仍然不确定为什么它首先没有工作，所以也许有人可以给出一些建议，但这是一个解决方案，取而代之。）

<script>
$(document).ready(function() {
    $(".clickertest").click( function(event){
        event.preventDefault();
        if ($(this).hasClass("isClicked") ) {
            $("#sidebar").animate({left:"0px"}, 400);          
            $(this).removeClass("isClicked");
        } else {
            $("#sidebar").animate({left:"-300px"}, 400);   
            $(this).addClass("isClicked");
        }
        return false;
    });
});
</script>

jquery切换表现得像hide而不是animate

2 个答案: