Warum funktioniert mein FadeIn nicht?

Ich habe bereits versucht, es herauszufinden, indem ich andere Stapelüberlauffragen benutze, aber es wird nicht funktionieren. Wie kann ich etwas animieren, nachdem die erste Animation in jQuery (mit oder ohne fadeIn) fertig ist?Warum funktioniert mein FadeIn nicht?

$(document).ready(function(){ 
     $('div.sky').animate({height: '40em', opacity: '1'},5000, function() { 
      $('div.grass').fadeIn({opacity: '1'},5000); 
     }); 
});

Das Skript ist in meinem HTML-Dokument. Ich weiß nicht, ob das etwas Fehler und das 'div.sky' funktioniert.

.sky { 
background: deepskyblue; 
width: 55%; 
margin: auto; 
opacity: 0; 
} 

.grass { 
    background: lawngreen; 
    width: 55%; 
    margin: auto; 
    opacity: 0; 
    height: 5em; 
}

Quelle

2016-10-31 4um

Sie können prüfen, ob dies in einem console.log, indem sie ausführt() oder einfach etwas. – Glubus

In JSFiddle eingecheckt und es scheint gut zu funktionieren. https://jsfiddle.net/buddhirameshi/5yx0n86a/ Ist das nicht das, was du willst? –

@BuddhiMadarasinghe Ich habe vergessen, mein CSS zu zeigen, die Opazität von Gras muss sich ändern, aber es tut es immer noch nicht. – 4um

Here's a working example with your code

JS:

$(document).ready(function(){ 
     $('div.sky').animate({height: '10em', opacity: '1'},5000); 
     $('div.grass').delay(5000).fadeIn(); 
});

CSS aktualisiert:

.grass { 
    background: lawngreen; 
    width: 55%; 
    margin: auto; 
    display:none; 
    height: 5em; 
}

fadeIn() Arbeiten mit display Eigenschaft, nicht opacity.

Dann füge ich einen delay() der Animationsdauer Wert, um die zweite Div nach der Animation abgeschlossen anzuzeigen.

Docs: delay():

Quelle

2016-10-31 12:37:04

Bitte erklären Sie auf setTimeout() und delay(), für die Lernzwecke. Vielen Dank. – stormec56

Ich füge kleine Erklärung mit einem Link zur API hinzu –

Tatsächlich wird die Verzögerung den Effekt stoppen, bis nach 5000, '' 'fadeIn (5000)' '' näher ist, was gefragt wurde. –

tauschen einfach in .animate() für .fadeIn(). Sie kümmern sich bereits um die Überblendung, indem Sie opacity einstellen.

$(document).ready(function() { 
 
    $('div.sky').animate({ 
 
    height: '40em', 
 
    opacity: '1' 
 
    }, 5000, function() { 
 
    $('div.grass').animate({ // <---- changed to animate here 
 
     opacity: '1' 
 
    }, 5000); 
 
    }); 
 
});

.sky { 
 
    background: deepskyblue; 
 
    width: 55%; 
 
    margin: auto; 
 
    opacity: 0; 
 
} 
 
.grass { 
 
    background: lawngreen; 
 
    width: 55%; 
 
    margin: auto; 
 
    opacity: 0; 
 
    height: 5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sky"></div> 
 
<div class="grass"></div>

Quelle

2016-10-31 12:43:57

Warum funktioniert mein FadeIn nicht?

Antwort

Verwandte Themen