изменение цвета разных пролетов один за другим - PullRequest
Новая
       13

изменение цвета разных пролетов один за другим

1 голос
/ 05 января 2012

У меня есть какой-то текст, и я хочу, чтобы он менял цвет таким образом, чтобы левый алфавит сначала менял цвет, затем следующий и так далее (как волна).Итак, я назначил каждому алфавиту диапазон (с классом span0, span1 и т. Д.) И попытался изменить цвет, используя следующий код: 

    for (var i = 0; i < spans.length; i++) {
       window.setTimeout(function(){
          $(".span"+i).animate({'color':'orange'}, 400);
    }, 300);
};

Код не работает.(и я использую плагин цвета jQuery) Итак, как мне добиться эффекта?

Ответы [ 2 ]

2 голосов
/ 05 января 2012 
for( var i = 0; i < spans.length; i++ ){
    $( '.span' + i ).delay( 300 + i*50 ).animate( {'color':'orange'}, 400 );
}

Используя jQuery, откладывайте на большее количество времени, затем анимируйте переключатель цвета.У вас есть две проблемы - вы запускаете все анимации одновременно, и, как указывает Альнитак, - ваша переменная i не в нужной области действия

И вы также можете устранить необходимостьдля .span0, .span1 и т. д., задав им всем класс span и изменив селектор в приведенном выше коде на: 

var $spans = $( '.span' )
for( ... ){
    $spans.eq( i )...
2 голосов
/ 05 января 2012

Это классическое «использование переменной цикла внутри ошибки обратного вызова» - к тому времени, когда вызывается обратный вызов, значение i устанавливается на его последнее известное значение вместо того значения, которое было на момент обратного вызова.зарегистрирован.

Попробуйте: 

// _returns_ a new function that's bound to the specified selector
function setcolor(sel) {
     return function() {
         $(sel).animate({'color', 'orange'}, 400);
     }
}

// set the callback to the function returned above
for (var i = 0; i < spans.length; ++i) {
  window.setTimeout(setcolor('.spans' + i), 300 + 400 * i);
}

за ответ @cwolves - вам также нужно увеличить тайм-ауты, в противном случае все они сработают сразу, следовательно, 300 + 400 * i в коде выше.

...