jQuery Variablen

goto;

goto;

Erfahrenes Mitglied
Hallo liebe Community,

für ein Privates Projekt, möchte ich mit jQuery eine Webseite mit Farbe befüllen.
Unzwar möchte ich so wenig Code wie möglich einsetzen.

Hier mal der Auszug aus der JS
HTML: 
<script>
var hoverColour = "#FFF";
var headerColour = "#f37124";
var foo = $("a.hoverBtn");

$(function(){
		
	foo.show("slow", function() {
		$(this).wrap("<div class=\"hoverBtn\">");
		$(this).attr("class", "");
	});
	foo.show("slow", function() {
		$(this).append("<div></div>");
		
		var wid = $(this).children("a").width();
		var hei = $(this).children("a").height();
		
		$(this).width(wid);
		$(this).height(hei);
		$(this).children("div").width(wid);
		$(this).children("div").height(hei);
		
		$(this).children("a").hover(function(){

			if ($(this).attr("rel") == "") {
				$(this).attr("rel", $(this).css("color"));
			}

			$(this).parent().children("div")
				.stop()
				.css({"display": "none", "opacity": "1"})
				.fadeIn("fast");

			$(this)	.stop()
				.css({"color": $(this).attr("rel")})
				.animate({"color": hoverColour}, 350);
		
		});
	});
	
});


</script>
Wie zusehen ist, möchte ich diesen Code für mehrere Bereiche bzw. Klassen anwenden.

Es gibt bsp. die Klassen
.header_menu
.logo
.hoverBtn
.link

-------

Ich habe mir so gedacht, diese Klassen einfach vorher in einer Variable zu schreiben und diese dann via "if" zu differenzieren.

Leider bringt das überhaupt keinen Effekt, sprich = Im Browser passiert nichts mehr.

Mein Ansatz mit "foo.show("slow", function..." scheint falsch zu sein.

Wäre für einen Tipp sehr dankbar :)

Viele Grüße
 
Ich weiß leider nicht was du mit "Farbe befüllen" meinst, aber wenn du so wenig Code wie möglich benutzen willst, dann solltest du wenigstens chaining überall ausnutzen.

Beispiel:

Javascript: 
//Vorher
$(this).width(wid);
$(this).height(hei);
$(this).children("div").width(wid);
$(this).children("div").height(hei);

$(this).children("a").hover(function(){
	//...
});

//Nachher
$(this).width(wid).height(hei)
	.children("div").width(wid).height(hei)
	.end()
	.children("a").hover(function(){
		//...
	});

Und afaik kannst du ohne Plugin keine Farbe animieren.
 
Hallo,

ok, dass war ein wenig unglücklich ausgedrückt.
Vorerst habe ich viele Felder, die einfach nur Grau sind - die dann per Mouseenter mit einer Farbe die im CSS definiert ist formatiert werden sollen.

Hoffe so ist es verständlicher

Beispiel
Logo = grau -> Mouseover -> Logo = rot
Menu = g rau -> Mouseover -> Menu = grün
Links = dunkelgrau -> Mouseover -> Links = rot

Für jeden dieser Bereiche muss ich eine Klasse anlegen. Und wiederrum für jede Klasse eine Funktion in JS.

Um dieses zu vermeiden, suche ich eine möglichkeit. Zu prüfen, welche klasse gerade "aktiv?!" ist im Script zu formatieren.

Viele Grüße
 
Schemenhaft hast du also so was?

CSS: 
.logo {background:#ccc;}
.logo.active {background:#f00;}

.menu {background:#ccc;}
.menu.active {background:#0f0;}

.links {background:#666;}
.links.active {background:#f00;}

Aber es kann z.B. ein logo und ein menu zeitgleich "active" sein?

Vielleicht hilft dir der Code weiter

Javascript: 
$(function() {
	var $all = $('.logo, .menu, .links').mouseenter(function() {
		var $this = $(this);

		if($this.is('.active')) {
			return;
		}

		$all.filter('.' + this.className.split(' ').join(',.')).removeClass('active');
		$this.addClass('active');
	});
});

Und komplett:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Mouseenter activate</title>
	
	<style type="text/css">
	div {
		width:50px;
		height:50px;
	}
	
	.logo {background:#ccc;}
	.logo.active {background:#f00;}

	.menu {background:#ccc;}
	.menu.active {background:#0f0;}

	.links {background:#666;}
	.links.active {background:#f00;}
	</style>
</head>

<body>
	<div class="logo"></div>
	<div class="logo"></div>
	<div class="logo"></div>
	<div class="menu"></div>
	<div class="menu"></div>
	<div class="menu"></div>
	<div class="links"></div>
	<div class="links"></div>
	<div class="links"></div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		var $all = $('.logo, .menu, .links').mouseenter(function() {
			var $this = $(this);
			
			if($this.is('.active')) {
				return;
			}
			
			$all.filter('.' + this.className.split(' ').join(',.')).removeClass('active');
			$this.addClass('active');
		});
	});
	/* ]]> */
	</script>
</body>

</html>
 
Hallo,
kleines Problem besteht noch.
Mir liegt es sehr am Herzen, dass hier ein Fade-Effekt genutzt wird, aus diesem Grund hab ich es auch mit jQuery versucht. Habe jetzt "$this.fadeIn("slow")" ergänzt. Leider wird dieses aber nicht ausgewertet, wahrscheinlich weil direkt eine Klasse deklariert wird.

Ist es überhaupt möglich, da mit einem Fade zu arbeiten?

Viele Grüße

PS:
Mit "$this.addClass("active").fadeIn("slow");" wird der Effekt ausgeführt, jedoch ohne Übergang, also direkt hart rein.
 
Zuletzt bearbeitet:
fadeIn setzt ja voraus, dass das Element nicht sichtbar ist (via .hide() oder manuellem display:none;). Sonst gibts ja nicht zu einfaden ;-).

Vielleicht entspricht das ja deiner Vorstellung.

Javascript: 
$this.stop().css('opacity', '0').addClass('active').fadeTo('slow', 1);
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück