# jQuery Variablen



## goto; (13. September 2011)

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

```
<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


----------



## CPoly (13. September 2011)

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:


```
//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.


----------



## goto; (13. September 2011)

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


----------



## CPoly (13. September 2011)

Schemenhaft hast du also so was?


```
.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


```
$(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:


```
<!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>
```


----------



## goto; (13. September 2011)

Hallo,

genau richtig 
Super, ich werde das gleich mal so versuchen.

Danke


----------



## goto; (13. September 2011)

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.


----------



## CPoly (14. September 2011)

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.


```
$this.stop().css('opacity', '0').addClass('active').fadeTo('slow', 1);
```


----------



## goto; (14. September 2011)

Hallo, ja das habe ich mir schon irgendwie gedacht, dass es deswegen ist. Klappt super. Danke


----------

