hide() nach 2 Sekunden

querytail

Erfahrenes Mitglied
Hallo zusammen,

ich habe eine kleine Funktion, in der
PHP:
hide(1000);
nach einem hover einen Container verschwinden lässt, aber mit Animation.

Jetzt habe ich
PHP:
$(this).animate({opacity:1},1000
ausprobiert, allerdings spielt das nach 5 mouseovers verrückt und verschwindet garnicht mehr oder sofort.

Wie kann ich das verläßlich regeln?

Grüße & Danke

Michael Meyer
 
Moin,

du müsstest vor der Zuweisung der neuen Animation die aktuelle laufenden Animationen(sofern vorhanden) stoppen.

Dies geht mit..... stop() :-)
 
Zuletzt bearbeitet:
Es wird garnichts mehr angezeigt, d.h. das DIV welches verschwinden soll, kommt erst garnicht.
 
Zuletzt bearbeitet:
PHP:
$("ul.nav") .mouseover(function() { 
		
		$(this).parent().find("ul.nav2").show();
		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.nav2").hide(); 
		});
	});
 
Mmmh, ja :confused:

Das Problem mit dem IE kann ich damit nicht reproduzieren, ohne das Markup dazu zu Sehen.

Was auf jeden Fall ein Problem ist:
Du weist ja das Hover-Verhalten bei jedem mouseover von ul.nav erneut zu...bei jquery heisst das, du überschreibst es nicht, sondern du fügst es hinzu...bei jedem Hovern wird dann das Ganze so oft versucht zu Starten, wie bereits mouseover in ul.nav gefeuert hat.
Umgehen kannst du dies per one()

Da dies aber nicht unbedingt das Problem im IE8 erklärt, hab ich mal nen Beispiel fertiggemacht(funktioniert auch im IE8)
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=UTF-8"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-08-24" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script id="testscript" type="text/javascript">
<!--
//nur für css-zeugs
$('html').addClass('scripted');

$(document).ready(function(){
$('ul.nav')
  //Event nur 1x beachten
  .one('mouseenter', 
        function() 
        {
          //Transparenz und visibility ändern, spart das ganz opacity-Zeugs im CSS
          $(this).parent().find("ul.nav > li ul").css({opacity:0,visibility:'visible'})
          
          //Eventüberwachung
          $(this).parent().find("ul.nav > li").hover(function() 
            {
              $(this).find("ul.nav2").stop().fadeTo('fast',1);
            }, 
            function()
            {    
              $(this).find("ul.nav2").stop().fadeTo(1000,0);
            }
          );
    }); 
});
//-->
</script>
<style type="text/css">
<!--
ul,li{list-style-type:none;margin:0;padding:0;}
html.scripted ul.nav2{visibility:hidden;border:1px dotted #717171}
ul.nav{background:#919191;padding:4px;}
ul.nav li ul{background:#a1a1a1;}
ul.nav li span{background:#c1c1c1;display:block;font-weight:bold;}
-->
</style>
</head>
<body>
<ul style="width:200px;">
  <li>
    <ul class="nav">
      <li><span>#1</span>
        <ul class="nav2">
          <li>#1.1</li>
          <li>#1.2</li>
          <li>#1.3</li>
        </ul>
      </li>
      <li><span>#2</span>
        <ul class="nav2">
          <li>#2.1</li>
          <li>#2.2</li>
          <li>#2.3</li>
        </ul>
      </li>
      <li><span>#3</span>
        <ul class="nav2">
          <li>#3.1</li>
          <li>#3.2</li>
          <li>#3.3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

</body>
</html>
 
Hallo und danke,

leider funktioniert das nicht. Gibt es keine Möglichkeit, das funktionierende hide ohne Animation 1 Sekunde zu verzögern?

Grüße & Danke

Michael Meyer
 
leider funktioniert das nicht.
Achja? Was denn?

Da mußt du hier weit und breit der einzige User sein, denn Svens Codebeispiel aus Post #8 funktioniert bei mir erwartungsgemäß, und wie von ihm angekündigt, anstandslos im IE8.

Glaubst du allen ernstes, dass er hier den Hilfesuchenden vollmundig funktionstüchtigen Code unterjubelt, der sich anschliessend als untauglich erweist? :rolleyes:
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück