Jquery: If hover mache "das", wen nicht mehr hover dan "das"
Guten Morgen Gutefrage.net, erstmal mein Code:
$(".leistungen").hover(function(){ $( ".technik" ).animate({ marginTop: "+=62", height: "toggle" }, 5000, function() { // Animation complete. });
});
Wie kann ich sagen das er nur einmal bei einem hover den div "technik" auf margin-top 62px einstellen soll? Und das er wen nicht mehr gehovert wird wieder zurückgehen soll?
Und dan natürlich wieder bei einem erneuten hover das ganze nochmal usw.
MfG
Matrix
5 Antworten
du könntest beim ausführen das jeweilige click event überschreiben , somit ist es auch nur einmal wirksam .
siehe z. b. http://stackoverflow.com/questions/15280531/how-to-detect-mousein-and-mouseleave-in-pure-javascript
Nimm die Ereignise "mouseover" und "mouseout".
Um einen bestimmten Block nur einmal je Ereignis "Mauszeiger betritt das Element" auszuführen, kannst du eine skriptweit sichtbare (boolesche) Variable nehmen, die in mouseover abgefragt wird (wenn sie gesetzt ist, überspringe den Block) und am Ende des Blocks gesetzt wird und in mouseout zurückgesetzt wird.
document.getElementsByClassName("leistungen").onmouseover = function() {
$( ".technik" ).animate({ marginTop: "+=62", height: "toggle" }, 5000, function() { // Animation complete. });
}
Du kannst 2 Argument übergeben, nutzt aber momentan nur eins. Probiers mal so:
$(".leistungen").hover(function(){$( ".technik" ).animate({ marginTop: "+=62", height: "toggle" }, 5000, function() {});},function(){$( ".technik" ).animate({ marginTop: "-=62", height: "toggle" }, 5000, function() {});});
PS: Dämlicher Code-Editor hier bei gf
zumindest bei jsfiddle sieht das beispiel nicht so aus wie es sein soll.
Er soll wen man hover das div nach unten setzen und sobald man nicht mehr hovert wieder zurückgehen
Genau das macht es doch. Hovert man das div "leistungen" wird "technik" extrem langsam nach unten geschoben, verlässt man "leistungen" kommt "technik" genauso langsam wieder nach oben.
Und wieso nicht CSS?
Einfacher und sinnvoller (zumindest hier).
Mit jsfiddle geht es besser ;-)
http://jsfiddle.net/sd8awwz6/