Javascript setInterval：第一个间隔突然

Question

When using JavaScript's setInterval method in the example below with jQuery effects, the initial display does not appear to engage the fadeIn method. "text" is displayed suddenly.

Subsequent iterations through the chain of effects starting with fadeIn() execute as expected. It is just the first pass where the "text" is displayed suddenly without the fadeIn effect.

Any ideas as to why this occurs? Thanks - a JavaScript beginner.

setInterval(myFunction, 1000);
function myFunction() {
    $('#myId').fadeIn(1500).html("text").delay(2750).fadeOut(1500).delay(1000;
};

Answer 1

It could be Fading In without you noticing as the text is added after the fade In. Switch it around, add the text before fading it in. Make sure it was not displayed beforehand (in CSS or however you need it).

$('#myId').html("text").fadeIn(1500).delay(2750).fadeOut(1500).delay(1000);

Answer 2

Assuming your text is initially blank and hidden, you are fading in an empty element and then setting the text to text only after the element is faded in. Reverse those steps:

$('#myId').html("text").fadeIn(1500).delay(2750).fadeOut(1500).delay(1000);

 setInterval(myFunction, 1000); function myFunction() { $('#myId').html("text").fadeIn(1500).delay(2750).fadeOut(1500).delay(1000); }; 

 #myId { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myId"> </div>