Question

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

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

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

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

Answer 1

{@ 1}}函数已被弃用。

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

在下面的例子中，我使用“立即调用的函数表达式”将该状态变量包装在一个闭包中（这样它不是全局的）。而不是奇数/偶数标志我实际上使用表达式.toggle(fn1, fn2)在每次点击时交替地在0到50之间翻转目标坐标。

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

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;
});

如何使用点击功能切换功能？

2 个答案: