javascript - 不带显示/隐藏选项的切换方法

Question

如何使用.toggle()方法但不用于显示和隐藏目的？

例如，当我点击某个 div 时，我想为其位置设置动画
$(div).animate({"left":"+=50px"}); 然后在第二次单击时将 div 返回到同一位置 $(div).animate ({“left”:“-=50px”})。

我知道还有其他解决方案，但我想使用 .toggle() 来实现此目的，而不隐藏显示 div。有什么想法吗？

Answer 1

$("#myDiv").toggle(function() {
    $(this).stop().animate({
       left:"+=50"
    }, 500);
}, function() {
    $(this).stop().animate({
        left:"-=50"
    }, 500);
});

#myDiv{
background-color:black;
width:100px;
height:100px;
position:absolute;
left:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="myDiv"></div>

希望这能回答您的问题。但是，jQuery 1.9 及更高版本不允许此功能。