CODEWITHSUNDEEP
javascriptjqueryoptimization
user1381806
user1381806

Reputation: 529

optimize JavaScript setTimeout

What would be a better way of writing this:

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

Upvotes: 0

Views: 858

Answers (3)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Just throwing out my version...

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

Upvotes: 1

strah
strah

Reputation: 6732

Instead of using some weird timeOut chain why you don't use TimelineMax from greensock.com.

It's far more advanced and way easier to use.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382806

Create a function:

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

Upvotes: 2

Related Questions