variabile jQuery in modo errato incorporato

Question

la funzione di callback qui non funziona. Penso che sto usando la variabile StartColor in modo non corretto.

Nota:. Ciò richiede jQuery UI

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

Grazie ragazzi. Mi è stato effettivamente cercando di refactoring questo codice:

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

Ho diversi colori di partenza e le diverse proprietà che ho da animare. Sembra che ci sia una soluzione migliore rispetto ripetere lo stesso codice 3 volte.

Answer 1

dichiararla fuori delle due funzioni, e rimuovere il " + + "

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 meglio ancora, l'uso .data() per ricordare il colore per quel particolare elemento:

$("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 se il colore sembra essere la stessa per tutti i collegamenti, basta avere una sola volta, e riutilizzare quel valore. Potrebbe in effetti essere più sicuro da quando hai a che fare con un'animazione.

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

---

Modifica In base alla tua domanda aggiornato, sembra che si sta cercando di fare un po 'di riduzione del codice. Sembra che ci sia abbastanza differenza tra loro che cercando di consolidamento sarebbe stato abbastanza complicato che si può finire con più codice.

Un modo per ridurre sarebbe quello di cambiare i gestori hover() per accettare 1 funzione invece di 2:

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

accorcia un po '.

Un'altra opzione (dal momento che si sta utilizzando jQueryUI presumo) sarebbe quello di animare un toggleClass (anche se penso che può essere rotto in l'ultima versione di UI).

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

Poi nel CSS:

h3 a.hover {
    color:#000000;
}

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

// etc...

... basta essere consapevoli che ancora una volta penso che può essere rotto nella sua ultima versione, e avrete bisogno di prova, perché a volte può essere flakey.

Answer 2

Il " + + " non ha senso. Proprio l'uso

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

Answer 3

Si sta creando una variabile locale in una richiamata e cercando di utilizzarlo in un altro.

Al contrario, è necessario memorizzare il vecchio colore utilizzando $.data.
Inoltre, non mettere le virgolette attorno alla variabile; che lo rende in una stringa.