javascript - 优化 JavaScript setTimeout

Question

写这个更好的方法是什么：

setTimeout(function() {
    $('#clock').animate({
        'marginTop': '-20px'
    }, 'slow', $.bez(bezierEasing));
}, 100);
setTimeout(function() {
    $('#submit').animate({
        'top': '-5px'
    }, 500, $.bez(bezierEasing));
}, 200);
setTimeout(function() {
    $('#details').animate({
        'top': '-200px'
    }, 500, $.bez(bezierEasing));
}, 300);
setTimeout(function() {
    $('#details').animate({
        'top': '19px'
    }, 100, $.bez(bezierEasing));
}, 600);

Answer 1

创建一个函数：

// adjust your function accordingly...
function animateIt(selector, speed, top) {
   setTimeout(function() {
    $(selector).animate({
     'top': top
    },   speed, $.bez(bezierEasing));
   }, 600);    
}

Answer 2

只是扔掉我的版本...

function animateEl(selector, css, speed, timer) {
   var tmp = parseInt(speed, 10);
   if (!isNaN(tmp)) {
      speed = tmp;
   }
   return setTimeout(function () {
      $(selector).animate(css, speed, $.bez(bezierEasing) 
   }, timer);
}

animateEl('#clock', {'marginTop': '-20px' }, 'slow',  100);
animateEl('#submit', { 'top': '-5px' }, 500, , 200);
animateEl('#details', { 'top': '-200px' }, 500, 300);
animateEl('#details', { 'top': '19px' }, 100,  600);

Answer 3

为什么不使用greensock.com 的TimelineMax ，而不是使用一些奇怪的 timeOut 链。

它更先进，更易于使用。