如何使用带有点击功能的切换功能？

Question

我想在用户单击按钮时创建动画。我想在点击时执行两个动画功能，所以我想我会使用切换功能在这两个功能之间切换。

现在的问题是，如果我使用切换功能，它会在没有点击的情况下执行两个动画功能，并且按钮也会消失。

$('#button').toggle(
    function() {
        $('#slider').stop().animate({"margin-right": '0'});
    },
    function() {
        $('#slider').stop().animate({"margin-right": '50'});
    }
);

当用户每次点击按钮时，我如何交替执行动画功能？

Answer 1

.toggle(fn1, fn2) 函数已被弃用。

最好的替代方法是使用一个维护状态变量的函数来指示它是“偶数”点击还是“奇数”点击。

在下面的示例中，我使用“立即调用的函数表达式”将该状态变量包装在一个闭包中（因此它不是全局的）。我实际上不是使用奇数/偶数标志，而是使用表达式 target = 50 - target 在每次点击时在 0 和 50 之间交替翻转目标坐标。

轮询元素的当前位置将无法正常工作，因为它会错过在动画中间发生的按钮点击。

(function() {   // closure to hold state variable
    var target = 0;
    $('#button').on('click', function() {
        $('#slider').stop().animate({'margin-right': target});
        target = 50 - target;
     });
})();

见http://jsfiddle.net/alnitak/5daYu/

Answer 2

试试这个，

$('#button').on('click',function(){
   var mr=parseInt($('#slider').css('margin-right').replace('px',''))==0 ? 50 : 0;
   $('#slider').stop().animate({"margin-right": mr});
});

Alernatively,

var mr=0;
$('#button').on('click',function(){
    $('#slider').stop().animate({"margin-right": mr});
    mr=(mr==0) ? 50 : 0;
});