Farbschattierungsmenü mit jQuery

Hallo, ich bin Liam Goodacre, und Chris hat mich gebeten, ein kurzes jQuery-Tutorial darüber zu schreiben, wie man Fading-Hover-Effekte erzielt. Ich werde zeigen, wie man Farb- und Bildverschmelzungen durchführt. Wir werden jQuery und das jQuery Colour Plugin verwenden.

Als ich das erste Mal so etwas geschrieben habe, habe ich ein Hintergrund-Div so eingestellt, dass es beim Hovern mit der Maus einblendet und beim Verlassen der Maus ausblendet. Ich stellte fest, dass, wenn ich meine Maus schnell über den Link bewegte und wieder weg, der Hintergrund genauso oft aufblitzte, wie ich die Maus bewegt hatte. Dann habe ich der Animation befohlen, anzuhalten, bevor ich neue Animationen einstelle. Das löste das Problem, führte aber ein neues ein.

Das neue Problem: Wenn ich denselben Test durchführte (wiederholtes Hovern mit der Maus), sahen die Maus-Aus-Zustände des Links langsam genauso aus wie der Hover-Zustand, daher hörte der Hintergrund nach ein paar Malen auf, auszublenden. Ich bemerkte, dass Chris dasselbe Problem auf seiner Website hatte.

Dann hatte ich eine Idee: Beim Hovern mit der Maus, wenn ich die aktuelle Animation stoppe und den Hintergrund unsichtbar setze, bevor ich ihn einblende, anstatt ihn aus seinem aktuellen Zustand heraus einblenden zu lassen. Das scheint das Problem gelöst zu haben.

Beispiel ansehen   Dateien herunterladen

Ok dann, fangen wir an…

Was wir brauchen, ist ein Div, das zwei Dinge enthält: ein Anker-Element und ein weiteres Div, das ich als subDiv bezeichnen werde. Das subDiv zeigt das Bild an, das beim Hovern mit der Maus eingeblendet wird. Der Anker überlagert das subDiv und hat einen transparenten Hintergrund.

Das HTML

Wir werden das subDiv mit jQuery dynamisch zum Div hinzufügen, um die Menge an HTML, die wir schreiben müssen, zu reduzieren. Das ist hilfreich, wenn man mehrere solcher Links hat.

Das ist bisher unser HTML-Code…

<div class="hoverBtn">
	<a href="https://css-tricks.de/">Go to CSS-Tricks</a>
</div>

Wir haben ein Div mit der Klasse hoverBtn, das einen Link zu CSS-Tricks enthält.

Das CSS

div.hoverBtn {
	position: 		relative;
	width: 			100px;
	height: 		30px;
	background:		#000 url(your_background_image.png) repeat-x 0 0 scroll;
}
div.hoverBtn a {
	position: 		relative;
	z-index: 		2;
	display: 		block;
	width: 			100px;
	height: 		30px;
	line-height: 		30px;
	text-align: 		center;
	color:			#000;
	background:		transparent none repeat-x 0 0 scroll;
}
div.hoverBtn div {
	display:		none;
	position: 		relative;
	z-index: 		1;
	width: 			100px;
	height: 		30px;
	margin-top: 		-30px;
	background:		#FFF url(your_hover_image.png) none repeat-x 0 0 scroll;
}

Das subDiv ist nun unter dem Anker positioniert, und ich habe Hintergrundgrafiken auf das Div und das subDiv angewendet.

Das JavaScript

Ich gehe davon aus, dass Sie ein grundlegendes Verständnis der Verwendung von jQuery haben, obwohl der Code auch dann ziemlich selbsterklärend ist, wenn Sie es nicht haben.

Hier ist unser Ausgangspunkt…

//when the dom has loaded
$(function(){
	
});

Ich bin sicher, die meisten von Ihnen sind sich vollkommen bewusst, dass jeglicher Code, der zwischen diesen beiden Zeilen geschrieben wird, ausgeführt wird, sobald das DOM fertig geladen ist.

Jetzt müssen wir das subDiv hinzufügen. Das können wir mit der `append`-Methode von jQuery-Objekten erreichen.

//when the dom has loaded
$(function(){
	//display the hover div
	$("div.hoverBtn").show("fast", function() {
		//append the background div
		$(this).append("<div></div>");
	});
});

Ich habe `append` innerhalb des Callbacks der `show`-Methode eingepackt, damit wir `this` verwenden können, um jedes `div.hoverBtn`-Element zu referenzieren.

Jetzt müssen wir das Hover-Ereignis des Links programmieren. Wir werden die Schriftfarbe ausblenden, daher sollten wir eine Hover-Farbe angeben. Wir können auch das `rel`-Attribut verwenden, um die ursprüngliche Farbe jedes Ankers zu speichern. Das ist nützlich für unterschiedlich gefärbte Links.

var hoverColour = "#FFF";
//when the dom has loaded
$(function(){
	//display the hover div
	$("div.hoverBtn").show("fast", function() {
		//append the background div
		$(this).append("<div></div>");
		//on link hover
		$(this).children("a").hover(function(){
			//store initial link colour
			if ($(this).attr("rel") == "") {
				$(this).attr("rel", $(this).css("color"));
			}
			//fade in the background
			$(this).parent().children("div")
				.stop()
				.css({"display": "none", "opacity": "1"})
				.fadeIn("fast");
			//fade the colour
			$(this)	.stop()
				.css({"color": $(this).attr("rel")})
				.animate({"color": hoverColour}, 350);
		},function(){
			//fade out the background
			$(this).parent().children("div")
				.stop()
				.fadeOut("slow");
			//fade the colour
			$(this)	.stop()
				.animate({"color": $(this).attr("rel")}, 250);
		});
	});
});

Im Grunde passiert also Folgendes:

• Eine Hover-Farbe wird deklariert
• Sobald das DOM geladen ist…
• Ein subDiv wird an das hoverBtn-Div angehängt
• Beim Hover-Ereignis des Links
  Die ursprüngliche Farbe wird im rel-Attribut des Links gespeichert
  Die Animation des subDiv wird gestoppt
  Es wird ausgeblendet und dann so eingestellt, dass es eingeblendet wird
  Die Animation des Links wird gestoppt
  Seine Farbe wird zurückgesetzt und so eingestellt, dass sie zur Hover-Farbe übergeht
• Beim Callback des Hover-Ereignisses
  Die Animation des subDiv wird gestoppt
  Es wird dann so eingestellt, dass es ausblendet
  Die Animation des Links wird gestoppt
  Es wird dann so eingestellt, dass es zu seiner ursprünglichen Farbe übergeht

Weitere Entwicklungen

Sie könnten versuchen, dies zu verbessern, indem Sie das enthaltende Div dynamisch laden. Das könnte auch beinhalten, die Größe des enthaltenden Divs an die des Anker-Elements anzupassen.