jQuery variable de forma incorrecta incrustado

Question

la función de devolución de llamada que aquí no está funcionando. Creo que estoy usando la variable StartColor incorrectamente.

Nota:. Esto requiere jQuery UI

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

Gracias chicos. En realidad estaba tratando de refactorizar el código:

$("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);
});

Me tienen diferentes colores de partida y diferentes propiedades que desea animar. Parece que hay una solución mejor que repetir el mismo código de 3 veces.

Answer 1

declararla fuera de las dos funciones, y retire la " + + "

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  
}); 

... o mejor aún, el uso .data() para recordar el color de ese elemento en particular:

$("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);  
}); 

... o si el color pasa a ser el mismo para todos los enlaces, acaba de obtener una vez, y volver a utilizar ese valor. De hecho, podría ser más seguro, ya que está tratando con una animación.

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: Sobre la base de su pregunta actualizada, parece que estamos tratando de hacer un poco de reducción de código. Parece que hay bastante diferencia entre ellos que tratar de consolidación sería bastante complicada que puede terminar con más código.

Una forma de reducir sería cambiar sus manipuladores hover() para aceptar 1 función en lugar de 2:

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

acorta un poco.

Otra opción (ya que estás usando jQueryUI supongo) sería la de la animación de un toggleClass (aunque creo que se puede romper en la última versión de la interfaz de usuario).

$("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);
});

A continuación, en el CSS:

h3 a.hover {
    color:#000000;
}

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

// etc...

... sólo ten en cuenta de nuevo que creo que puede ser roto en la última versión, y usted necesitará a prueba, ya que a veces puede ser escamosa.

Answer 2

The " + + " doesn't make sense. Just use

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

Answer 3

You're creating a local variable in one callback and trying to use it in the other.

Instead, you should store the old color using $.data.
Also, don't put quotes around the variable; that makes it into a string.