0

嗨，我遇到了一些 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);
}
4

3 回答 3

1

  1. 永远不要使用 eval，因为eval 是 evil。只需使用匿名函数作为回调setTimeout：

    setTimeout(function() {
    /* do some stuff here, e.g. call animation() function */
}, 2000);

    它将更快、更安全、更易于阅读和维护。

  2. 您正在重新定义animation()，这就是为什么无论您单击哪个按钮，最后定义的动画都会发生。

  3. 您可以轻松地重构您的代码：

    <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);
});
于 2013-04-25T16:20:10.917 回答
0

可以使用 Promise 独立执行所有动画，然后在它们全部完成后做一些事情：

$.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);
    });
}
于 2014-12-03T07:52:03.240 回答
-1

你用function animation()了四次。改用function animation1(),function animation2()等等。

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

于 2013-04-25T15:56:14.360 回答