JQuery - сохраняйте BackgroundColor var, анимируйте, затем возвращайтесь в var - PullRequest
0 голосов
/ 03 февраля 2012

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

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

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

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

Ответы [ 2 ]

1 голос
/ 03 февраля 2012

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

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

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

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

1 голос
/ 03 февраля 2012

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

...