Thema: Javascript Slider

Martin79 · **am:** 17. Juli 2013, 16:02:32

Hallo,

kann mir vielleicht jemand weiterhelfen?
Ich möchte gerne einen Slider für den Warenkorb benutzen. Habe auch alles soweit fertig.
ABER: Wie bekomme ich es hin, das der Bereich (menu) automatisch nach 5 sek. zu geht wenn
die Maus diesen Bereich verlassen hat?

Hier der Code:

Code: PHP [Auswählen]

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#morebutton").click(function(){
$("#menu").slideToggle("slow");
});
});
</script>
<style>
#menu {background: #CCC;width: 100px;}
#morebutton {cursor: pointer;}
</style>
</head>
<body>
<div id="morebutton">###</div>
<div id="menu">
<p>HIER TEXT</p>
</div>
</body>
</html>

Über einen Rat wäre ich sehr dankbar.

MfG
Martin

Linkback: https://www.modified-shop.org/forum/index.php?topic=26996.0

mooncrawler · **Antwort #1 am:** 17. Juli 2013, 16:09:38

Code: PHP [Auswählen]

$('#menu').live('mouseleave', function() {$("#menu").slideDown("slow");});

Evtl. ist es statt der slideDown die slideUp Funktion.

Martin79 · **Antwort #2 am:** 17. Juli 2013, 21:27:46

Danke für den Rat, aber leider funktioniert das so nicht.

Vielleicht hat noch jemand anders eine Idee.

MfG
Martin

mooncrawler · **Antwort #3 am:** 18. Juli 2013, 01:57:10

Dann probiers mal so:

Code: PHP [Auswählen]

$('#menu').mouseleave(function() {
$("#menu").slideDown("slow");
});

mouseleave statt mouseleave gibt es noch mouseout

web0null · **Antwort #4 am:** 18. Juli 2013, 02:59:50

Da ja die 1.10er Version eingebunden wird (code.jquery.com/jquery-latest.js), gibt es .live() nicht mehr (seit 1.9), also wenn dann so:

Code: Javascript [Auswählen]

$('#menu').on('mouseleave', function() {
$(this).slideUp("slow");
});

... aber da werden die 5 sek. auch noch nicht berücksichtigt, wobei ich es eh sinnvoller finde es gleich nach dem die Maus den #menu Bereich verlassen hat, ..zu schließen.

Aber der Vollständigkeit halber der Code für das schließen nach 5 sek.:

Code: Javascript [Auswählen]

$('#menu').on('mouseleave', function() {
This = $(this);
setTimeout(function(){
This.slideUp("slow");
}, 5000);
});

Aber da wirst du noch ein Problem bekommen, und zwar wenn du mit der Maus nicht von dem Container #morebutton auf den Container #menu kommst, dann greift das nämlich nicht.
Also würde ich das Konstrukt so umbauen das der Button #morebutton innerhalb des Container #menu ist, oder beide in einen eigenen Container stecken, und den dann beim verlassen ansprechen.

Martin79 · **Antwort #5 am:** 18. Juli 2013, 18:27:15

Nochmals Danke für die Hilfe, aber irgendwie bekomme ich das nicht hin.

@web0null: Hast du vielleicht ein Beispiel für mich.

Nur um das ganze nochmal zu erklären, ich möchte gerne die Warenkorb-Box ähnlich wie beim gambioshop.

Gibt es vielleicht noch eine andere Möglichkeit das umzusetzen?

Mfg
Martin

noRiddle (revilonetz) · **Antwort #6 am:** 18. Juli 2013, 18:31:09

Muß es denn auf Click sein ?
Warum nicht einfach mit CSS3 auf hover, ohne Javascript ?

Ein Javascript Click- und gleichzeitig ein Mouseleave-Event auf das selbe Element dürfte nicht so einfach durchzuführen sein.

Gruß,
noRiddle

Thema: Javascript Slider

Martin79

Javascript Slider

mooncrawler

Re: Javascript Slider

Martin79

Re: Javascript Slider

mooncrawler

Re: Javascript Slider

web0null

Re: Javascript Slider

Martin79

Re: Javascript Slider

noRiddle (revilonetz)

Re: Javascript Slider

Teile Thema

Ähnliche Themen

Slider Javascript und CSS nur auf Startseite einbinden

Javascript Problem Slider + Horizontales Menü

Meldung "Bitte Javascript aktivieren" ausgeben, wenn Javascript deaktiviert ist

jQuery Slider (Easy Slider) einbinden -> ohne Modul