如何鏈接多個jQuery動畫功能？

我有幾個按鈕，都需要啓動一個獨特的動畫效果onclick。每個按鈕都有不同的動畫！

我有一塊代碼，我使用的效果很好。我簡單的想複製這段代碼幾次，改變一些元素和值在這裏和那裏，但我不能讓它工作！請幫忙！！？？

的代碼看起來像這樣...

$('#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); 
}

來源

2013-04-25 user2195988

爲什麼不只是在你的超時設置一個匿名函數，而不是調用你已經定義了多次的函數呢？ – 2013-04-25 15:54:20

-1

您使用function animation()四倍。改爲使用function animation1()，function animation2()等。

不要忘記在setTimeout("animation()",2000);做出變化太大（setTimeout("animation1()",2000);等）

來源

2013-04-25 15:56:14

切勿使用eval，爲eval is evil。只需使用匿名函數作爲回調setTimeout：
```
setTimeout(function() { 
    /* do some stuff here, e.g. call animation() function */ 
}, 2000); 
```
它會更快，safier，更容易閱讀和維護。
您正在重新定義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); 
});

來源

2013-04-25 16:20:10 Crozin

能使用的承諾獨立執行所有的動畫，然後做一些事情時，他們都完成了：

$.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-03 07:52:03

如何鏈接多個jQuery動畫功能？

回答

相關問題