variables jQuery intégré de manière incorrecte

Question

la fonction de rappel ne fonctionne pas ici. Je pense que je suis une mauvaise utilisation de la variable couleurDébut.

Note:. Cela nécessite jQuery UI

$("a").hover(function() { 
    var startColor = $(this).css("color");
    $(this).stop().animate({ color: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ color: " + startColor + "}, 350);
});

Merci les gars. Je suis en train d'essayer de factoriser ce code:

$("nav ul li a, aside ul li a").hover(function() {  
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
    },function() {  
    $(this).stop().animate({ color: "#5944b2"}, 350);  //Start color
});
$("h5#logo a, button").hover(function() {  
    $(this).stop().animate({ backgroundColor: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ backgroundColor: "#000000"}, 350);
});
    $("h3 a").hover(function() {  
    $(this).stop().animate({ color: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ color: "#000000"}, 350);
});

J'ai différentes couleurs de départ et des propriétés différentes que je Animez. On dirait qu'il ya une meilleure solution que de répéter le même code 3 fois.

Answer 1

déclarer à l'extérieur des deux fonctions, et retirer le " + + "

var startColor;

$("a").hover(function() { 
    startColor = $(this).css("color");
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: startColor}, 350);  //Start color  
}); 

... ou mieux encore, utilisez .data() de se rappeler la couleur de cet élément particulier:

$("a").hover(function() { 
    if( !$(this).data( 'startColor' ) ) {
        $(this).data( 'startColor', $(this).css("color") );
    }
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: $(this).data('startColor')}, 350);  
}); 

... ou si la couleur se trouve être le même pour tous les liens, juste obtenir une fois, et réutiliser cette valeur. Il peut effectivement être plus sûr puisque vous avez affaire à une animation.

var startColor = $(a).css("color");

$("a").hover(function() { 
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: startColor}, 350);  //Start color  
}); 

---

EDIT: Sur la base de votre question mise à jour, il semble que vous essayez de faire une petite réduction de code. On dirait qu'il ya assez de différence entre les qu'essayer de consolidation serait assez compliquée que vous pouvez vous retrouver avec plus de code.

Une façon de réduire serait de changer vos gestionnaires de hover() d'accepter 1 fonction au lieu de 2:

$("h3 a").hover(function( e ) {  
    $(this).stop().animate({ color: e.type == 'mouseenter' ? "#54a888" : "#000000"}, 350);
});

raccourcit un peu.

Une autre option (puisque vous utilisez jQueryUI je suppose) serait d'animer un toggleClass (bien que je pense qu'il peut être cassé dans la dernière version de l'interface utilisateur).

$("h3 a,nav ul li a, aside ul li a,nav ul li a, aside ul li a").hover(function( e ) {  
    $(this).stop().toggleClass('hover', 350);
});

Puis, en CSS:

h3 a.hover {
    color:#000000;
}

nav ul li a.hover, aside ul li a.hover {
    color:#54a888;
}

// etc...

... il faut savoir encore que je pense qu'il peut être cassé dans la dernière version, et vous aurez besoin de tester, car il peut parfois être squameuse.

Answer 2

Le " + + " n'a pas de sens. Il suffit d'utiliser

$(this).stop().animate({ color: startColor}, 350);  //Start color  });  

Answer 3

Vous créez une variable locale dans un rappel et d'essayer de l'utiliser dans l'autre.

, vous devez stocker la plus ancienne couleur à l'aide $.data.
En outre, ne pas mettre des guillemets autour de la variable; qui fait en une chaîne.