Как медленно изменить фоновые атрибуты в jquery?

Question

Я хочу анимировать фон, но он не изменится с .animate!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

$(document).ready(function() {
    $(".menu").hover(
    function() {
        $(this).stop().animate({
            "background": "-moz-radial-gradient(top, #fff, #cfcfcf)"
        }, "slow");
    }, function() {
        $(this).stop().animate({
            "background": "-moz-radial-gradient(top, #fff, #333)"
        }, "slow");
    });
});​

Answer 1

Может ли более простое появление / исчезновение удовлетворить ваши потребности?

#div1{
    height:100px;
    width:100px;
    background-color:Black;
}​

$("#div1").click(function() {
    $(this).fadeOut(1000, function() {
        $(this).css("background-color", "#FF0000").fadeIn(1000);
    });
});​

Пример простого JsFiddle

EDIT

#div1{
    height:200px;
    width:200px;
    background-color:Black;
    float:left;
}​

$('#div1').click(function (){
    $(this).animate({backgroundColor: '#FF0000'}, 1000);
});​

См. новый JsFiddle (использует пользовательский интерфейс jQuery). Я считаю, что это даст вам эффект, который вы ищете.

Answer 2

Вы можете расположить один div над другим и постепенно увеличивать и уменьшать верхний. Это даст вам плавный переход цвета.

Обновленный пример изменения градиента при наведении
Пример: http://jsfiddle.net/PzZNB/22/

Answer 3

Функция анимации работает только с цифровыми единицами, такими как ширина, высота, отступы, поля, размер шрифта ... не с цветами.

Есть почти бесконечные способы сделать это. Вот список для проверки:

http://snook.ca/archives/javascript/jquery-bg-image-animations

http://www.protofunc.com/scripts/jquery/backgroundPosition

http://www.webresourcesdepot.com/background-image-animation-with-jquery-jani

Посмотрите на это решение CSS3 для анимации цвета фона

Просто анимация изображений Google jQuery Backgorund, но их объединяет то, что либо дочерний элемент перемещается вверх и вниз, либо позиция фона изображения анимируется.

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

Answer 4

Используйте этот плагин, чтобы использовать анимированный фон