JQuery фон анимировать - PullRequest
Новая
       34

JQuery фон анимировать

4 голосов
/ 15 января 2011

Можно ли анимировать background-color в jQuery, потому что он не работает. 

$('#something').animate({
    background :"red"
}, 1000);

Ответы [ 6 ]

5 голосов
/ 15 января 2011

Из документов ,

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

Так что, если вы используете пользовательский интерфейс jQuery, вы можете анимировать цвета фона.Просто убедитесь, что вы используете backgroundColor, а не background.

Плагин цветной анимации для jQuery также делает это.

Live Пример: http://jsfiddle.net/thai/NXejr/2/

2 голосов
/ 15 января 2011

Вам понадобится плагин для цветовой анимации с помощью jQuery:

http://plugins.jquery.com/project/color

1 голос
/ 17 июля 2015

Это простой код для анимации цветов RGB с использованием чистого jQuery (без использования плагина jQuery.Color ) 

var start = [255, 0, 0], end=[255,255,255];
$('#element').animate({'aaa': 1}, {step: function(now){
    $(this).css('background-color', 'rgb('+
        parseInt(start[0] + (end[0]-start[0]) * now) + ',' +
        parseInt(start[1] + (end[1]-start[1]) * now) + ',' +
        parseInt(start[2] + (end[2]-start[2]) * now) + ')'
    )
}, complete: function(){$(this).css('aaa', 0)}})
1 голос
/ 19 апреля 2011

Попробуйте это: 

$('#something').animate({ backgroundColor: "#FF0000" }, 1000, null, function () {
      $('#something').css("backgroundColor", "#FF0000");
  });

У меня был разный успех с animate, но я обнаружил, что использование встроенного обратного вызова плюс jQuery css, похоже, работает в большинстве случаев. Протестировано в IE9, FF4, Chrome, с использованием jQuery 1.5.

Для более полного решения, добавьте этот плагин: 

$(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FF0000";
        var animateMs = duration || 1000;
        var originalBg = this.css("background-color");

        if (!originalBg || originalBg == highlightBg)
            originalBg = "#FFFFFF"; // default to white

        jQuery(this)
            .css("backgroundColor", highlightBg)
            .animate({ backgroundColor: originalBg }, animateMs, null, function () {
                jQuery(this).css("backgroundColor", originalBg); 
            });
    };
});

и назовите это так: 

$('#something').animateHighlight();
0 голосов
/ 27 августа 2014

Используя аналогичный синтаксис (...{background-color :"red"}...), я получаю ошибку

SyntaxError: Неожиданный токен -

Мне удалось заставить его работать, заключив свойство CSS background-color в одинарные кавычки: 

$('#something').animate({
    'background-color' :"red"
}, 1000);
0 голосов
/ 05 мая 2014

Вы можете использовать переходы CSS3 для того же эффекта.Ваша анимация может быть достигнута с помощью 

#something {
  -webkit-transition: background-color 1s linear;
   transition: background-color 1s linear;
   background: red;

}

Единственная проблема с этим решением - IE <10 support </p>

...