анимированные изменения цвета для эффекта мерцания в JQuery - PullRequest
2 голосов
/ 10 февраля 2011

Я потратил довольно много времени, пытаясь заставить мерцать какой-то текст, меняя его с одного цвета на другой.Звучит просто, оказывается ужасно сложно.Простая вещь будет выглядеть примерно так:

$('#myElement').animate({color:black}, 100);
$('#myElement').animate({color:white}, 100);

Поместите это в цикл, повторите пять раз и скажите, что все готово.Ну, не работает, даже с установленным плагином цвета Jquery (который останавливает браузеры, сообщающие об ошибках, но не заставляет код работать ..).

Что работает, это:

    $('myElement').animate({top:0}, 100, function(){$('myElement').css('color','#000000');});
    $('myElement').animate({top:0}, 100, function(){$('myElement'.css('color','#ffffff');});

То есть: вообще ничего не делайте в функции animate, только используйте ее в качестве таймера, затем измените значение цвета css на элементе.Вот и все.Работает отлично.

Кстати: если вы делаете это и хотите, чтобы что-то еще происходило во время мерцания цветов, вам придется установить какой-то таймер или флаг на место - помните, что браузеры будут многозадачны ипродолжайте выполнять параллельно, пока цвета мерцают.Поэтому, если вы хотите, например, отключить выбор пользователем другого меню, пока оно мигает, вам придется сделать это, отключив другие варианты, пока анимация не будет завершена.

1 Ответ

4 голосов
/ 10 февраля 2011

Цепочка анимации

$('#myElement').animate({color:black}, 100).animate({color:white}, 100);

Если вы хотите остановить анимацию, используйте jQuery .stop ()

$('#myElement').stop();
...