jQuery Анимация и классы

Question

Предположим, у вас есть элемент списка, <li id="foo">, который вы хотите вытереть из одного цвета в другой, когда мы замаскировали, и что вы используете jQuery. Это довольно легко:

$('li#foo').bind('mouseenter' , function(e) { 
    $(this).animate({backgroundColor: '#F00'} , 300); 
}); 

Однако, что если вы хотите получить результирующий цвет или другие правила стиля из класса, определенного в CSS без того, объявляя их в JavaScript? Кажется, что нет способа узнать информацию о стиле из правил CSS, не имея примера правила, уже содержащегося в документе, что потребует, чтобы вы анимировали <li> на внешний вид цели, а затем в обратном вызове с анимацией задали класс, который приводит к избыточным объявлениям стиля и может испортить ваш CSS в «runtime».

Извините, если этот вопрос непонятен: это не происходит в контексте какого-либо конкретного проекта, мне просто интересно, как вы это сделаете. Кроме того, я знаю, что CSS3 гипотетически включает поддержку таких переходов, но использование CSS для динамического поведения вроде этого кажется таким уродливым взломом.

Answer 1

Я уверен, что javascript не может прочитать ваш стиль.

Если вы хотите, чтобы определенное свойство из таблицы стилей не встречалось нигде на странице, вам нужно будет добавить невидимый элемент, который применяет этот стиль, либо на время загрузки страницы в html, либо с помощью javascript когда угодно.

Это кажется немного теоретическим, но вместо того, чтобы определять стили в вашей таблице стилей, которые вы не используете, вы можете также объявить соответствующую переменную непосредственно в javascript.

Answer 2

Необходимо color plugin to animate background color.

Answer 3

Вы должны быть в состоянии просто сделать:

$(this).css('background-color') 

Если вы хотите получить цвет после его обновлены, добавьте его в функцию обратного вызова, как:

$('li#foo').bind('mouseenter' , function(e) { 
    $(this).animate({backgroundColor: '#F00'} , 300,function(){ 
     alert($(this).css('background-color')); 
    }); 
}); 

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

$(selector).live(event,function(){ 
    alert($(this).css('background-color')); 
}); 

Как примечание стороны, вы не должны делать Lī # Foo :) вобще #foo ускоряет ваш выбор времени и его ненужности, поскольку есть только один элемент с этим ID.

Answer 4

Я играл немного с идеей Кальвина, и это то, что я получил:

Предполагая, что следующий CSS:

#somediv .bar em { 
    color: #080; 
} 

Вы можете создать элементы практически и получить информацию о стиле, что путь:

$('<div id="somediv"><span class="bar"><em>') 
    .find('em').css('color') 

Watch it in action.