JQuery анимировать в прозрачный

Question

$(".block li").hover(
    function(){
        $(this).animate({backgroundColor: "#000"});
    },
    function(){
        $(this).animate({backgroundColor: "#fff"});
    }
);

Нужно изменить #fff на цвет.Анимация должна происходить от #000 до transparent.

Любое решение?

Answer 1

Вы можете использовать rgba(...) ( см. Поддержку браузера здесь ).

var elem = $('#foo')[0];

$({
    r: 0,
    g: 0,
    b: 0,
    a: 1
}).animate({
    a: 0
}, {
    step: function() {
        elem.style.backgroundColor =
            'rgba(' +
                ~~this.r + ',' + ~~this.g + ',' + ~~this.b + ',' +
                ~~(this.a*100)/100 +
            ')';
    },
    duration: 1000
});​

~~ соответствует минимальным значениям, иначе вы получите такие вещи, как rgba(0.1029302....

Answer 2

Вместо изменения цвета фона удалите этот атрибут!

Код так же прост:

$("li").hover(
    function(){
        $(this).toggleClass('hover', 1000);
    },
    function(){
        $(this).toggleClass('hover', 2000);
    }
);

Пример: http://jsfiddle.net/rdWTE/

Чтобы это работало, вам нужен пользовательский интерфейс jQuery и jQuery. Делает именно то, что вы хотели (кроме цветов)!

Эти числа в скрипте jQuery обозначают продолжительность анимации в миллисекундах.

EDIT:

Хм ... Обнаружил, что toggleClass может время от времени глючить. Лучше использовать addClass при наведении и removeClass при наведении мыши.

Answer 3

Редактировать: Я проверил это, и оно работает.

Создайте два класса.Один с фоном: # 000, а другой с фоном: прозрачный;

Анимируйте toggleClass или removeClass для класса фона # 000.

пример:

jQuery('.block li').hover(function() {
  $(this).toggleClass('blackClass', 'fast' );
}

CSS:

.blackClass { background: #000; }

Answer 4

Это может сработать.Он добавляет новый div с фоновым цветом onMouseOver, затем исчезает и удаляет div onMouseOut.

Пример.

Пример с элементами списка надimage.

Удачи, надеюсь, это поможет.

Answer 5

Я получил решение этой проблемы по этой ссылке

$('#test').animate({

backgroundColor: "#DFC21D",

}, 1000, function() {

$('#test').css("backgroundColor","transparent");

});

Answer 6

$ (". Block li"). Hover ( функция () { $ (this) .animate ({backgroundColor: "# 000"}); }, функция () { $ (this) .animate ({backgroundColor: $ (this) .parent (). css ("backgroundColor")}); } );

Answer 7

Это может потребовать некоторых изменений в вашем HTML и CSS (что может быть выполнено скриптом, если у вас нет прямого контроля HTML / CSS).

Я бы разделил каждый элемент «.block li» на два элемента: один, который будет элементом фона, который можно анимировать с помощью $ .fadeTo (), и другой элемент, наложенный поверх него, который будет содержать содержимое переднего плана и которую вы можете вызвать $ .hover () с вашими обработчиками.

Answer 8

Я думаю, вам нужно использовать плагин цвета .

Answer 9

Почему бы не использовать CSS3-тег opacity?