JavaScript jQuery 1.4 wie arbeite ich mit .delay()?

Sithys · 29. August 2014

Moin zusammen,
eine vermutlich simple Frage, die sich mir als sehr komplex erwiesen hat x)

Ich habe einen Link, und nachdem dieser geklickt wurde, soll eine Verzögerung von 500ms auftreten, bevor die nächste Seite geladen wird.

In der jQuery Documentation zum neuen .delay() steht folgendes ->

HTML:

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>

Code:

<script>
$( "button" ).click(function() {
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
</script>

Das ist auch schon alles. Jetzt wollte ich das Ganze gerne auf meine Seite übertragen, und habe es wie folgt umgebaut:

Code:

<script>
        $( "div.einloggen" ).click(function() {
        $( "a.mainmenu" ).delay( 800 ).fadeIn( 400 );
        });
</script>

HTML:

<a href="#mainmenu">
     <div id="einloggen">Einloggen</div>
</a>

aber es will nicht so recht funktionieren... sorry, so wenig code, es muss doch so einfach sein, und ich bekomme es nicht hin

DaVian · 29. August 2014

In deinen Beispiel sind ein paar Fehler.

1. Dein Selektor 'a.mainmenu' existiert nicht.
2. Dein Selektor 'div.einloggen' existiert auch nicht
3. Du hast geschrieben, dass du nach 500ms eine neue Seite laden willst. Dein Bsp öffnet aber ein div?

Außerdem finde ich es problematisch Benutzer 500ms auf eine Reaktion der Webseite warten zu lassen. Die werden dann sich alle am Anfang fragen was da los ist wenn nichts passiert. Und dann werden die ein paar mal auf den Knopf drücken weil nichts passiert.
Fehlender Response auf einen Request des Users sollte man vermeiden. Der User muss ja schließlich Feedback bekommen, ob das passiert was er wollte.

Sithys · 29. August 2014

Keine Sorge, das hat schon seine Gründe, warum ich das so mache ;-)

So habe ich es jetzt gelöst:

Code:

<script>
        function timeout(){
            document.getElementById('welcomeDiv').style.display = "block";
            setTimeout(function(){
                $.mobile.changePage( "#mainmenu" );}, 4000);        
        }
</script>

HTML:

<div id="einloggen" onclick="timeout();">Einloggen</div>

Code:

.spinner {
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
  display: none;
  margin-left: 37px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

vorher hat das Ding natürlich display:none;

Daaron · 29. August 2014

Click-Funktionen inline zu definieren geht zwar, ist aber unsauber. Binde Event-Handler lieber onDomReady, das machts später übersichtlicher.
Außerdem mal die Frage: Was soll der Delay erreichen? Willst du z.B. ein weiteres Event ausführen, nachdem deine CSS-Animationen fertig sind? Wenn ja: dasselbe hatte ich letztens auch auf dem Tisch. DOM-Elemente lösen ein Event aus, wenn eine Animation bzw. Transformation abgeschlossen ist.

Suche

JavaScript jQuery 1.4 wie arbeite ich mit .delay()?

Sithys

Captain

DaVian

Cadet 4th Year

Sithys

Captain

Daaron

Fleet Admiral

Ähnliche Themen