jQuery Girl
  1. jQuery Girl
  3. Enigme de renversement de Tigerstipe
Intereting Posts
Détecter le défilement dans un élément chargé ajax avec jQuery Résultats non définis dans la saisie semi-automatique jQuery retourne la classe li cliquée dans un ul javascript / jquery Rechercher et supprimer des propriétés vides d’objects window.onload vs document.ready jQuery Listes sortingables + nestedes avec jQuery UI 1.8.2 django-autocomplete-light – Comment retourner un champ différent de la clé primaire d’un modèle? Jquery Validation plug-in et Colorbox Comment implémenter les tabs de navigation afin qu’ils se comportent comme <a data-toggle="tab" href= <> dans MVC? Changer l’image de fond du corps avec un effet de fondu dans jQuery IE9: Toujours une faible utilisation du processeur sur mon site Web asp.net accéder à un contrôle de la fonction statique Comment faire référence à un identifiant de composant JSF dans jQuery? jQuery ne sélectionne toutes les cases que si sa case n’est pas cochée Utiliser Javascript pour POST XML à api

Enigme de renversement de Tigerstipe

J’ai donc une liste de divs qui ont des couleurs de fond alternées via jQuery. Ceux-ci ont également des survols qui changent la couleur de fond. Le problème est que la fonction de basculement ne me permet que d’animer cette classe à une couleur d’arrière-plan au passage de la souris, mais comme je l’ai déjà dit, j’ai une couleur d’arrière-plan alternée. Comment puis-je gérer cela dans jQuery? Mon code ci-dessous était ma tentative de déclaration if, else avec pairs et impairs, mais je ne connais pas la syntaxe appropriée. 

$(document).ready(function() { $('.whycapad_staff:even').css({"background-color":"#eaebeb"}); $('.whycapad_staff').hover(function() { $(this).stop().animate({"background-color":"#5facf8"}, 300); }, function(){ if ($(this = ':even')){ $(this).stop().animate({"background-color":"#eaebeb"}, 300) }; else { $(this).stop().animate({"background-color":"#FFFFFF"}, 300) } }) })

Il suffit d’utiliser css: 

 .whycapad_staff:nth-child(even) { background-color:#eaebeb; } .whycapad_staff:hover { background-color:#5facf8; }

Démo: http://jsfiddle.net/maniator/npWnm/

Voici un exemple si vous voulez juste utiliser jQuery: http://jsfiddle.net/maniator/npWnm/5/ 

 $(function() { //jQuery fallback $('.whycapad_staff').hover(function() { $(this).data('b-color', $(this).css('background-color')); $(this).css('background-color', '#5facf8'); }, function() { $(this).css('background-color', $(this).data('b-color')); }); });

Retour complet: http://jsfiddle.net/maniator/npWnm/9/ 

 $(function() { //jQuery fallback $('.whycapad_staff').each(function(index, item){ if(index%2 == 1){ $(this).css('background-color', '#eaebeb'); } }); $('.whycapad_staff').hover(function() { $(this).data('b-color', $(this).css('background-color')); $(this).css('background-color', '#5facf8'); }, function() { $(this).css('background-color', $(this).data('b-color')); }); });