JQuery - сохраняйте BackgroundColor var, анимируйте, затем возвращайтесь в var

Question

Я пытаюсь сохранить цвет фона в JQuery, чтобы я мог анимировать фон, а затем вернуть его в исходный цвет. Проблема заключается в том, что я основываю анимацию на элементе «a.someclass», но свойство цвета фона находится в классе div, в котором находится ссылка «a.someclass».

Я уверен, что мог бы реструктурировать свой HTML / CSS для достижения этой цели, но мне любопытно, как я это сделаю в JQuery. Я думаю, вы поймете, что я имею в виду, когда посмотрите на мой неверный JQuery и скрипку.

Понимание было бы здорово - http://jsfiddle.net/7FxJC/2/

Большое спасибо ТАК

Answer 1

Я изменил ваш jsFiddle ... это то, что вы ищете?

http://jsfiddle.net/7FxJC/18/

Во-первых, способ объявления вашей переменной ORIGINAL позволил бы получить доступ только к этому.переменная внутри этой функции (в этом случае функция наведения мыши).Поскольку нам требовался доступ к нему за пределами этого, я использовал метод .data () jQuery (http://api.jquery.com/data/)), чтобы сохранить цвет фона родительского тега для самого элемента, а затем вызывать его, когда нам это нужно.

Я использовал метод .parent (), чтобы получить ссылку на родителя тега, чтобы получить его цвет фона.

Answer 2

jQuery позволяет хранить произвольные «данные».Вы не записываете его на другом элементе DOM, изменяя чужие свойства.

Далее следует сохранить цвет фона ссылки, анимировать ее текущий цвет другим цветом при наведении курсора, а затем вернуть его состояние при mouseOut.Это то, что вы имели в середине?

$("a.configureboxlink").hover(function() {
    var oldColor = $(this).data('oldColor') || $(this).css('background-color');
    $(this).data('oldColor', oldColor)
        .stop().animate({'background-color': 'red'});
}, function() {
    var oldColor = $(this).data('oldColor');
    $(this).stop().animate({'background-color': oldColor});
});

jsFiddle