jQuery Animation and Classes

Question

Supposons que vous ayez un élément de liste, <li id="foo">, que vous souhaitez fondre d'une couleur à l'autre lorsque vous le survolez et que vous utilisez jQuery. Ceci est assez facile:

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

Cependant, si vous vouliez obtenir la couleur résultant ou d'autres règles de style d'une classe définie dans CSS sans aussi les déclarer en JavaScript? Il semble qu'il n'y ait aucun moyen d'apprendre les informations de style à partir des règles CSS sans avoir un exemple de la règle déjà dans le document, ce qui nécessiterait d'animer le <li> à l'apparence cible, puis dans le rappel animation-finished, conduit à des déclarations de style redondantes et peut bloquer votre CSS à "runtime".

Désolé, cette question n'est pas claire: Cela ne se produit pas dans le contexte d'un projet spécifique, je suis juste curieux de savoir comment vous y prendre. En outre, je sais que CSS3 inclut hypothétiquement le support de telles transitions mais employer le CSS pour le comportement dynamique comme ceci semble un hack laid.

Answer 1

Je suis sûr que javascript ne peut pas lire votre feuille de style.

Si vous voulez une propriété de la feuille de style qui ne se trouvent nulle part sur la page, vous devez ajouter un élément invisible qui a ce style appliqué, soit à temps de chargement des pages dans le code HTML ou javascript quand tu veux. Cela semble un peu théorique, au lieu de définir des styles dans votre feuille de style que vous n'utilisez pas, vous pouvez aussi bien déclarer la variable appropriée directement en javascript.

Answer 2

Vous avez besoin de color plugin to animate background color.

Answer 3

Vous devriez pouvoir simplement faire:

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

Si vous souhaitez obtenir la couleur après sa mise à jour, ajouter à la fonction de rappel, comme:

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

Vous pouvez ensuite enregistrer cela à un var, ou faire tout ce que vous vouliez faire avec. Vous pouvez également modifier votre « lier » à « vivre » et il mettra à jour automatiquement à chaque fois que sa course:

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

Comme une note de côté, vous ne devriez pas faire li # foo :) faire juste #foo accélère votre sélection temps et inutile car il n'y a qu'un seul élément avec cette identification.

Answer 4

J'ai joué autour d'un peu avec l'idée de Calvin, et voici ce que je suis:

En supposant que le CSS suivant:

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

Vous pouvez créer les éléments virtuellement et obtenir les informations de style chemin:

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

Watch it in action.