0

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

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

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

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

4

2 回答 2

2

该.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/

于 2013-06-06T08:09:44.620 回答
0

尝试这个，

$('#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;
});
于 2013-06-06T07:55:00.227 回答