Блог

Как мне анимировать цвет текста с помощью jQuery / jQuery UI. Текст в настоящее время # 000. когда запускается событие, я хочу, чтобы цвет текста менялся на # F00, а затем возвращался к # 000 в течение 3 секунд.

Я пробовал effect("highlight", {}, 3000) с подсветкой, но она не запускает эффект повторно, пока не будет завершена, а затем продолжит выполнять его в течение времени, в течение которого он был запущен… не очень полезно для этого.

Есть идеи?

C

Обновить:

это то, что у меня есть сейчас:

 $("input:text[name=size_w]").keyup(function () {
            var value = ($("input:text[name=size_w]").val() == "") ? "null" : $("input:text[name=size_w]").val();
            $("#width_emb").text(value).css({ color: "red" }).animate({ color: "black" }, 3000);
        }).keyup();
  

Но это все еще работает не так, как мне нужно. Я не могу повторно запустить начальное изменение цвета, пока анимация не будет завершена. если событие повторно запускается до истечения 3 секунд, мне нужно отказаться от анимации, чтобы запустить ее снова.

Вам нужен jQueryUI, он добавляет поддержку цветной анимации

http://jqueryui.com/demos/animate/

С сайта jQueryUI:

Ядро эффектов пользовательского интерфейса jQuery расширяет функцию animate, позволяя также анимировать цвета. Он> активно используется функцией перехода к классу и способен анимировать следующие свойства:

• Фоновый цвет
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• Цвет
• outlineColor

В ответ на обновленный вопрос, если вы на полпути к анимации и хотите, чтобы она была остановлена или перезапущена, если вы нажмете еще раз, вы можете вызвать .stop() http://api.jquery.com/stop / Вы также можете использовать это, чтобы очистить все анимации, поставленные в очередь.