Falsch eingebettet jQuery Variable

Question

hier die Callback-Funktion funktioniert nicht. Ich glaube, ich bin mit der 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 war tatsächlich versucht, diesen Code zu 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 habe verschiedene Start Farben und unterschiedliche Eigenschaften, dass ich animieren mag. Scheint, als ob es eine bessere Lösung als den gleichen Code 3 Mal wiederholen.

Answer 1

Deklarieren Sie es 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 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 geschieht das gleiche für alle Links zu sein, es ist nur einmal zu erhalten, und diesen Wert wiederverwenden. Es kann tatsächlich sein sicheres, da man es zu tun mit einer 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: Auf der Basis Ihrer aktualisierten Frage, es sieht aus wie Sie versuchen, ein wenig Code Reduktion zu tun. Scheint, wie es zwischen ihnen genug Unterschied ist, dass die Konsolidierung versucht genug wäre kompliziert, dass Sie mit mehr Code können am Ende.

Eine Möglichkeit wäre, zu reduzieren Ihre hover() Handler ändern 1-Funktion zu übernehmen anstelle von 2:

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

Verkürzt es oben ein wenig.

Eine weitere Option (da Sie verwenden jQueryUI Ich gehe davon aus) zu animieren ein toggleClass wäre (obwohl ich denke, es kann in der aktuellen Version von UI gebrochen werden).

$("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 zu Test brauchen, 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, es in den anderen zu verwenden.

Stattdessen sollten Sie speichern die alte Farbe $.data verwenden.
Auch nicht Anführungszeichen um die Variable; Das macht es in einen String.