JQuery SetTimeout и показать

Question

Извините за этот новобранец вопрос я пытаюсь сделать три красные пузыри речи появляются один за другим, смотрите мой код здесь: http://jsfiddle.net/FLt9Z/

Этот раздел JavaScript выглядит следующим образом:

function leftappear() { 
    $('#redbubble-left').show(); 
} 

function topappear() { 
    $('#redbubble-top').show(); 
} 

function rightappear() { 
    $('#redbubble-right').show(); 
} 


var animation_script = [ 
    { 
     at_time: 30 * 1000, // 30 seconds 
     animation: leftappear() 
    }, 
    { 
     at_time: 31 * 1000, // 31 seconds 
     animation: topappear() 
    }, 
    { 
     at_time: 32 * 1000, // 32 seconds 
     animation: rightappear() 
    } 
]; 

var current_time = 0; 

function animate_next() { 
    var next = animation_script.shift(), 
     time_between = next.at_time - current_time; 
    setTimeout(function() { 
     current_time = next.at_time; 
     next.animation(); 
     animate_next(); 
    }, time_between); 
} 

Спасибо большое, ребята!

Answer 1

два вопроса:

1. Вы были вместо ВЫЗОВ методы анимации реферирования их в animation_script
2. вы никогда не запуская ПЕРВОЕ одушевленные рядом.

http://jsfiddle.net/FLt9Z/1/

Вот два основных изменения.

var animation_script = [ 
    { 
     at_time: 2* 1000, // 30 seconds 
     animation: leftappear // NOTE: drop the parens() 
    }, 
    { 
     at_time: 3* 1000, // 31 seconds 
     animation: topappear // NOTE: drop the parens() 
    }, 
    { 
     at_time: 4* 1000, // 32 seconds 
     animation: rightappear // NOTE: drop the parens() 
    } 
]; 

, а затем 2, пиная его, я просто добавил animate_next(); на дно. Вы можете поместить это в свой скрипт инициализации вверху или в другом месте. Это было просто для демонстрационных целей.

Answer 2

В дополнение к первому ответу я также хотел бы указать, что ваш текущий код продолжает называть себя, даже если он прошел через список пузырьков, чтобы показать, вместо этого я просто пропустил бы его один раз и установил таймауты:

$.each(animation_script, function(i, animation) { 
    var next = animation_script.shift(), 
     time_between = next.at_time - current_time; 
    setTimeout(function() { 
     current_time = next.at_time; 
     next.animation(); 
    }, time_between); 
});