hide() nach 2 Sekunden @ tutorials.de: Tutorials, Forum & Hilfe

querytail · 24.08.10 13:43

Hallo zusammen,

ich habe eine kleine Funktion, in der

PHP-Code:


hide(1000);

nach einem hover einen Container verschwinden lässt, aber mit Animation.

Jetzt habe ich

PHP-Code:


$(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

Sven Mintel · 24.08.10 14:07

Moin,

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

Dies geht mit..... stop()

querytail · 24.08.10 14:34

Cool, danke. Das geht.

Leider habe ich nun ein Problem mit IE 8.

Sven Mintel · 24.08.10 14:37

Zitat von querytail

Leider habe ich nun ein Problem mit IE 8.

...das da wäre?

querytail · 24.08.10 14:41

Es wird garnichts mehr angezeigt, d.h. das DIV welches verschwinden soll, kommt erst garnicht.

Sven Mintel · 24.08.10 14:49

Poste mal bitte mehr von deinem Code, von

kommt erst garnicht

...war ja bisher keine Rede.
Wenn du dieses Container auch einblendest, wäre dies natürlich auch eine Animation, die von stop() betroffen wäre.

querytail · 24.08.10 15:55

PHP-Code:


$("ul.nav") .mouseover(function() { 

        

        $(this).parent().find("ul.nav2").show();

        $(this).parent().hover(function() {

        }, function(){    

            $(this).parent().find("ul.nav2").hide(); 

        });

    });

Sven Mintel · 25.08.10 03:00

Mmmh, ja

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>

querytail · 28.08.10 13:09

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

spicelab · 28.08.10 13:33

Zitat von querytail

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?

querytail · 28.08.10 15:43

Hallo,

das Script funktioniert als solches, aber ich benötige, wie geschrieben, eines ohne Animation, d.h. die Ausführung von hide soll "einfach" verzögert werden.

Grüße

Michael Meyer

Sven Mintel · 28.08.10 16:20

Dann nehme die Animation heraus und füge vor dem Ausblenden eine Verzögerung(delay()) ein:

Code :

$(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(0,1);
            }, 
            function()
            {    
              $(this).find("ul.nav2").stop().delay(2000).fadeTo(0,0);
            }
          );
    }); 
});

spicelab · 28.08.10 18:15

Zitat von querytail

leider funktioniert das nicht.

Zitat von spicelab

Achja? Was denn?

Zitat von querytail

das Script funktioniert als solches, aber ich benötige, [...]

Ahja, und weil Svens Script deinen Erwartungen nicht gerecht wird, und du offensichtlich nicht imstande bist, daran selbst Hand anzulegen, degradierst du es kurzer Hand als funktionsuntauglich?!

Na, du weißt ja, wovon du hier sprichst

querytail · 29.08.10 11:06

@Sven: Dankeschön. Ich habe eine nun eine Lösung mit settimeout gefunden. Das frisst merkwürdigerweise auch der IE. Liegt vielleicht auch daran, dass ich ein *****er bin.

@spice...: Welchen Sinn haben Deine Beiträge? Sorry, ich kann zumindest bei diesem Thema keinen erkennen.

spicelab · 29.08.10 11:51

Zitat von querytail

@spice...: Welchen Sinn haben Deine Beiträge? Sorry, ich kann zumindest bei diesem Thema keinen erkennen.

Wenn dir zwischenzeitlich der Sinn meiner beiden gestrigen Beiträge irgendwo unterwegs abhanden gekommen ist, und du die Spur zu ihm hier in diesem Thema nicht mehr aufnehmen kannst, sind wohl ein paar zusätzliche Trainingseinheiten angesagt, um deinen Gehirnmuskel gescheit aufzubauen, und an eine höhere Leistungsgrenze zu führen.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Div nach X Sekunden ausblenden

sekunden nach Minuten und sekunden

abruch nach 30 sekunden

Update nach x Sekunden

Download nach Sekunden

E-Mail:

Abonnieren Abbestellen