以下脚本应该将div幻灯片放到“左300像素”的绝对位置。当前,脚本的行为类似于“显示/隐藏”切换。 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;
}

最佳答案

更新:如下所述,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 - jQuery的切换行为像隐藏而不是动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21508172/

10-12 12:51
查看更多