Falsch eingebettete jQuery-Variable

Question

Die Callback-Funktion funktioniert hier nicht. Ich denke, ich verwende die startColor-Variable falsch.

Hinweis: Dies erfordert jQuery UI.

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

Danke Jungs. Ich habe versucht, tatsächlich diesen Code Refactoring:

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

ich verschiedene Start Farben und unterschiedliche Eigenschaften, die ich animieren möchten. Es scheint, als gäbe es eine bessere Lösung, als den gleichen Code dreimal zu wiederholen.

Answer 1

es erklären außerhalb der beiden Funktionen, und entfernen Sie die " + + "

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

... oder besser noch, verwenden .data() die Farbe für das jeweilige Element zu erinnern:

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

... oder wenn die Farbe für alle Links gleich ist, holen Sie sie einfach einmal und verwenden Sie diesen Wert erneut. Es kann tatsächlich sicherer sein, da Sie mit einer Animation zu tun haben.

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: Basierend auf Ihrer aktualisierten Frage, es sieht aus wie Sie versuchen, ein wenig Code Reduktion zu tun. Scheint so, als gäbe es genügend Unterschiede zwischen ihnen, dass der Versuch, eine Konsolidierung zu erreichen, kompliziert genug wäre, damit Sie mehr Code haben.

Eine Möglichkeit wäre zu reduzieren Ihre hover() Handler ändern akzeptieren 1 Funktion anstelle von 2: ein bisschen

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

Verkürzt es auf.

Eine andere Option (da Sie jQueryUI verwenden, nehme ich an) wäre eine toggleClass zu animieren (obwohl ich denke, dass es in der neuesten Version der Benutzeroberfläche gebrochen sein kann).

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

dann in CSS:

h3 a.hover { 
    color:#000000; 
} 

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

// etc... 

... nur bewusst sein, wieder, dass ich denke, es kann in der aktuellen Version gebrochen werden, und Sie werden prüfen müssen, weil es manchmal flockig sein kann .

Answer 2

Die " + + " macht keinen Sinn. Verwenden Sie einfach

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

Answer 3

Sie erstellen eine lokale Variable in einem Rückruf und versuchen, sie in der anderen zu verwenden.

Stattdessen sollten Sie die alte Farbe mit $.data speichern.
Setzen Sie auch keine Anführungszeichen um die Variable; das macht es zu einer Schnur.