Question

嗨，我有一些jquery麻烦！

我有几个按钮，都需要启动独特的动画效果。每个按钮都有不同的动画！

我有一块我正在使用的代码，效果很好。我想简单地想要多次复制这段代码，在这里和那里改变一些元素和值，但我无法让它工作！请帮忙!! ??

代码看起来像这样......

    $('#animation2').click(function(){
setTimeout("animation()",2000); 
});

function animation(){
    float_boat();
    sail_away();
}

function float_boat(){
    $(".boat").animate({top:"-=80px"},800).animate({top:"+=100px"}, 1200);
    setTimeout("float_boat()",2000);
}

function sail_away(){
    $(".sailboat").animate({left:"80%",marginLeft:"0px"}, 3500).fadeTo(600, 0);
}


$('#animation3').click(function(){
setTimeout("animation()",2000); 
});

function animation(){
    bounce_bike();
    ride_away();
}

function bounce_bike(){
    $(".motorbike").animate({top:"-=80px"},800).animate({top:"+=100px"}, 1200);
    setTimeout("bounce_bike()",2000);
}

function ride_away(){
    $(".motorcycle").animate({left:"80%",marginLeft:"0px"}, 3500).fadeTo(600, 0);
}

$('#animation4').click(function(){
setTimeout("animation()",2000); 
});

function animation(){
    float_balloon();
    float_away();
}

function float_balloon(){
    $(".balloon").animate({top:"-=80px"},800).animate({top:"+=100px"}, 1200);
    setTimeout("float_balloon()",2000);
}

function float_away(){
    $(".airballoon").animate({left:"80%",marginLeft:"0px"}, 3500).fadeTo(600, 0);
}

Answer 1

永远不要使用eval，因为eval is evil。只需使用匿名函数作为setTimeout的回调：
```
setTimeout(function() {
    /* do some stuff here, e.g. call animation() function */
}, 2000);
```
它会更快，更安全，更易于阅读和维护。
您正在重新定义animation()，这就是为什么无论您点击最后定义的动画的哪个按钮都会出现。

您可以轻松地重构代码：

<button class="animate" data-animation="boat">Animate boat</button>
<button class="animate" data-animation="bike">Animate bike</button>

---

var animate = {
    boat: function() { /* do boat animation here */ };
    bike: function() { /* do bike animation here */ };
};

$("button.animate").on("click", function() {
    var animation $(this).data("animation");

    setTimeout(function() {
        // call appropriate animation, e.g. animate.boat(), or animate.bike()
        animate[animation]();
    }, 2000);
});

Answer 2

可以使用promises独立执行所有动画，然后在完成所有动画时执行操作：

$.fn.deferredAnimate = function(options, duration, easing, callback) {
  var deferred = $.Deferred();

  $(this).animate(options, duration, easing, function() {
    callback && callback();
    deferred.resolve();
  });

  return deferred.promise();
};

即，这是一个旋转木马演示，它同时激活两个不同的列表（以不同的速度）：

var PAUSE_DURATION = 1500;
var ANIMATE_DURATION1 = 1000;
var ANIMATE_DURATION2 = 2000;

var textList = $('#list1');
var imageList = $('#list2');

setTimeout(slideItem, PAUSE_DURATION);

function slideItem() {
    var currentTextLi = $('li', textList).first();
    var currentImageLi = $('li', imageList).first();

    var textPromise = currentTextLi.deferredAnimate({
        'margin-left': -375
    }, ANIMATE_DURATION1, 'easeInOutExpo', function() {
        var c = currentTextLi.remove();
        textList.append(c);
        c.css('margin-left', 0);
    });

    var imagePromise = currentImageLi.deferredAnimate({
        'margin-left': -660
    }, ANIMATE_DURATION2, 'easeInOutExpo', function() {
        var c = currentImageLi.remove();
        imageList.append(c);
        c.css('margin-left', 0);
    });

    $.when(textPromise, imagePromise).then(function() {
        //repeat the animations
        window.setTimeout(slideItem, PAUSE_DURATION);
    });
}

Answer 3

您使用function animation()四次。请改用function animation1()，function animation2()等。

不要忘记在setTimeout("animation()",2000);中进行更改（setTimeout("animation1()",2000);等等）

如何链接多个jquery动画函数？

3 个答案: