✔ jQuery slide mit timeout

[Alaniak]

Hallo zusammen,
ich hab da ein kleines wahrscheinlich recht einfaches Problem, aber ich komm einfach nicht drauf.
Und zwar wird ein div per jquery bei klick auf einen link "aufgeslidet". "Zusliden" tut dieser aber nur bei erneutem Klick auf den Link. Ich hätte aber gern, dass der div nach einer bestimmten Zeit in der die Maus sich außerhalb des Divs befindet von alleine wieder schließt.

Wie stell ich das am besten an?
Hier mal mein bisheriger Code:

$(document).ready(function() {
	$('.link').click(function(){
		$('div#slide_div).slideToggle("slow");
	});
});

 

[Alaniak]

Ich hab das ganze jetzt etwas erweitert mit einem mouseout-event:

$(document).ready(function(){
			$('.link').click(function(){
				$('div#slide_div').slideDown("slow");
			});
			
			$('div#slide_div').mouseout(function(){
				$('div#slide_div').slideUp("slow");
			});
		});

Allerdings klappt das auch nicht so ganz, da der div schon zugeht wenn man die maus nicht ausserhalb des divs bewegt...?!

 

[Quaese]

Hi,

wenn ich das richtig überblicke, wird das Sliden von einem Link ausserhalb des Elements gestartet, das geslidet werden soll.

Ich würde wie folgt vorgehen:

Die Methode slideDown bietet die Möglichkeit, im zweiten Argument eine callback-Funktion zu übergeben, die aufgerufen wird, wenn der Slidevorgang beendet wurde. Hier könntest du das zeitverzögerte Schliessen anstossen.

Wird die Maus vor dem Schliessen über das Element (mouseover) bewegt, wird das zeitverzögerte Schliessen abgebrochen (clearTimeout).

Wird die Maus aus dem Element bewegt (mouseout), wird das Schliessen erneut zeitverzögert angestossen.

var hTimer = null;

$(document).ready(function() {
  $('.link').click(function(){
    $('div#slide_div').slideDown("slow", function(){
      hTimer = window.setTimeout(function(){$('div#slide_div').slideUp("slow");}, 2000);
    });
  });

  $('div#slide_div').mouseover(function(){
    if(hTimer != null){
      window.clearTimeout(hTimer);
      hTimer = null;
    }
  });

  $('div#slide_div').mouseout(function(){
    hTimer = window.setTimeout(function(){$('div#slide_div').slideUp("slow");}, 2000);
  });
});

Ciao
Quaese

 

[Alaniak]

Genau das hab ich gesucht. Super, vielen Dank!

 

[Alaniak]

Muss das Thema doch nochmal aufmachen, weils nicht klappt. Der slidedown wird ganz normal ausgeführt aber der div wird nach 2 sekunden wieder hochgesliden auch wenn ich mit der maus drauf bin.

Ich hab mir das ganze übrigens mal im Debugger angeschaut und die .mouseout Funktion wird auch aktiviert wenn man sich innerhalb der slide_div befindet.