How to make the text disappear and appear?

Asked

Viewed 2,431 times

2

I don’t dominate jQuery completely, I have a text on a div and I’d like him to do a vanishing effect and appear as a performance... or something like that.

Sort of like this:

[appears in 2 seconds]

TEXT 1

[wait 5 seconds]

[fade in 2 seconds]

[appears in 2 seconds]

TEXT 2

[wait 5 seconds]

[fade in 2 seconds]

[appears in 2 seconds]

TEXT 3

[wait 5 seconds]

[fade in 2 seconds]

Infinite loop.

Html code:

<div id="texto" class="header_title">
    <h2>TEXTO AQUI</h2>
</div>
jquery

1 answer

4


Hello, if I understand correctly, you can do it this way.

With the method setInterval, you can repeat the desired commands after a certain time.

        setInterval(function(){
            $("#texto").fadeIn(ducarao).delay(tempo);
            $("#texto").fadeOut(duracao);
        }, tempo);

To select the DIV via Jquery you can use the selector $("#text"), thus selecting the element by its ID. Then with the fadein() function the "appearance" animation of the text is performed, also realize that it is possible to pass to the function the animation time. The delay() function to keep the text on the screen for 5 seconds and finally the fadeOut() function to make the text disappear. I recommend that a researched in these functions on google, since I can not share the links of the same for not having enough reputation...

$(function(){
  $("#texto").hide();
});

var i = 2;
setInterval(function(){
	$("#texto").fadeIn(2000).delay(5000);
	$("#texto").fadeOut(2000, function(){
		$("#texto").html("<h2>TEXTO "+ i +"</h2>");
		i++;
	});
}, 2000);
<html>
	<head>
	   <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	</head>
<body>
	<div id="texto" class="header_title">
	    <h2>TEXTO 1</h2>
	</div>
</body>
</html>

Good luck!

  • Good afternoon, the effect is the same, but each transaction would be a different text, text 1, text 2, text 3... and not the same text as you put it

  • You want to update the text of the same div or show from another?

  • Same div, as I explained upstairs

  • So just change the contents of the div as I did in the reply. You can use . html()

  • Text 1 , 2 and 3 are text examples, text will be something like Text1='Welcome', Text2='vc this well', Text3='I want to buy etc',

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.