Неактивный цвет фона фона JQuery

Я хочу изменить цвет фона "exampleDiv" на исходном белом фоне, когда я вызываю код ниже, чтобы немедленно изменить желтый фон и затем вернуться к исходному белым фоном.

$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");

Однако этот код не работает.

У меня есть только ядро ​​JQuery и пользовательский интерфейс JQuery, связанный с моей веб-страницей.

Почему не работает код выше?

Ответы

Ответ 1

Я имел переменный успех с animate, но обнаружил, что использование его встроенного обратного вызова плюс jQuery css, похоже, работает в большинстве случаев.

Попробуйте эту функцию:

$(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FFFF9C";
        var animateMs = duration || "fast"; // edit is here
        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); 
            });
    };
});

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

$('#exampleDiv').animateHighlight();

Протестировано в IE9, FF4 и Chrome, используя jQuery 1.5 (для этого не нужен плагин UI). Я также не использовал плагин jQuery color - вам понадобится только это, если вы хотите использовать именованные цвета (например, 'yellow' вместо '#FFFF9C').

Ответ 3

У меня была та же проблема, и я смог заставить все работать, когда включил правильные файлы js.

<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.color-2.1.2.js"></script>

Я сделал еще один шаг и нашел хорошее расширение, которое кто-то написал.

jQuery.fn.flash = function (color, duration) {
   var current = this.css('backgroundColor');
   this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
   .animate({ backgroundColor: current }, duration / 2);
}

Вышеприведенный код позволяет мне сделать следующее:

$('#someId').flash('255,148,148', 1100);

Этот код заставит ваш элемент мигать красным, а затем вернуться к его первоначальному цвету.

Вот пример кода. http://jsbin.com/iqasaz/2

Ответ 4

Пользовательский интерфейс jQuery имеет эффект выделения, который делает именно то, что вы хотите.

   $("exampleDiv").effect("highlight", {}, 5000);

У вас есть некоторые опции, такие как изменение цвета выделения.

Ответ 5

Анимация backgroundColor не поддерживается в jQuery 1.3.2 (или ранее). Поддерживаются только параметры, которые принимают числовые значения. См. документация по методу. плагин цветных анимаций добавляет возможность сделать это с jQuery 1.2.

Ответ 6

Я столкнулся с одной и той же проблемой, и в конечном итоге это оказалось многократным вызовом jquery js файла на странице.

Хотя это отлично работает с любыми другими методами, а также с анимацией при попытке использовать другие свойства css, например, слева, но это не работает для свойства цвета фона в методе анимации.

Следовательно, я удалил дополнительный вызов jquery jquery файла, и он работал абсолютно нормально для меня.

Ответ 7

Для меня он отлично работал с effects.core.js. Однако я не помню, действительно ли это требовалось. Я думаю, что он работает только с шестнадцатеричными значениями. Здесь образец кода наведения, который заставляет вещи исчезать при наведении курсора. Думал, что это может быть полезно:

jQuery.fn.fadeOnHover = function(fadeColor)
{
    this.each(function()
    {
        jQuery(this).data("OrigBg",jQuery(this).css("background-color"));
        jQuery(this).hover(
            function()
            {
                //Fade to the new color
                jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000)
            }, 
            function()
            {
                //Fade back to original color
                original = jQuery(this).data("OrigBg");
                jQuery(this).stop().animate({backgroundColor:original},1000) 
            }
        );
    });
}
$(".nav a").fadeOnHover("#FFFF00");

Ответ 8

Мне пришлось использовать файл color.js, чтобы заставить это работать. Я использую jquery 1.4.2.

Получить здесь color.js

Ответ 9

Просто добавлен этот фрагмент ниже jquery script, и он сразу же начал работать:

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

Источник