✔ jquery: Div Box schrumpft bei MouseOver

[Darian]

Hallo Leute,

ich denke ich würde es vielleicht auch noch irgendwie mit den normalen JavaScript mitteln hinbekommen, aber ich dachte jquery wäre doch auch mal interessant.

Ein Button ist eine div Box, wenn ich mit der Maus drüber gehe, möchte ich dass width um ca. 30px kleiner wird (natürlich flüssig) und sobald die Maus wieder weg ist, soll er wieder zur normalen größe gehen.

Denke da gibt es sicher einen einfachen jquery Effekt mit dem man das machen kann, habe nur leider immer nur Effekte gefunden wo etwas irgendwie ausblendet oder ganz verschwindet.

Wäre für eine kurze Info dankbar.

lg Darian

 

[kuddeldaddeldu]

Hi,

schau Dir mal animate() an.

LG

 

[Darian]

Ok danke, mit dieser einen Funktion kann ich alles machen was ich brauche

Wenn es funktioniert

Wenn ich für eine Klasse einen Effekt mache, wird der dann nur für die class wo ich mit der Maus darüber fahre angewendet, oder für alle Klassen?

$(".button").mouseover(function() {
	$(".button").animate({
		width: "230px"
		});
								
});

Derzeit ist es so, passiert aber irgendwie noch nichts

lg Darian

 

[Darian]

Hallo Leute,

lag wohl daran dass ich das ready Event vergessen habe, jetzt geht es mehr oder weniger.

Leider bewegen sich alle Buttons wenn ein Mouseover eintritt.

Muss ich das jetzt für jeden Button kopieren, oder kann ich das mache irgendwie allgemein machen, dass nur die Klasse von der das Event kommt beeinflusst wird.

Wäre fein wenn da noch infos kommen, sonst programmiere ich es eben aus.

lg Darian

 

[kuddeldaddeldu]

Hi,

versuch's mal so:

$(".button").mouseover(function() {
	$(this).animate({
		width: "230px"
		});
								
});

LG

 

[DeluXe]

Wenn du die Breite um genau 30px vergrößern willst, kannst du das auch wie folgt schreiben:

width: "+=30px"

Das hat den Vorteil, das, sollte sich die normale Breite irgendwann mal ändern, du nicht alle Werte im JavaScript anpassen musst.

 

[Darian]

Hallo Leute,

alle eure Tipps haben sofort und super funktioniert.

Danke für die Hilfe.

lg Darian