JQuery text fade in fade out

Question

I would like to

replace word from "." to "first"
After 1 sec, replace word from "first" to "second"
After 1 sec, replace word from "second" to "first"
After 1 sec, replace word from "first" to "second"
After 1 sec, replace word from "second" to "first"
repeatedly continue the cycle

However my code does not work as what I expected. - Instead it appends the another word to previous word.

Could you please suggest how I approach this problem? Thank you. http://codepen.io/anon/pen/OyWpQq

    <h2 class="quotes"><span class="typeBg"><span class="type">.</span></span> 
<span class="details"><a href="#"><span class="detailsText">.</span></a></span> 
 <span class="CTA"><a href="#"><span class="CTAText">.</span></a></span></h2>

.quotes {height:45px !important;margin-top:-17.5px;margin-bottom:17.5px;border:1px solid #bec0c2;padding:10px 0px;}

.typeBg{height:44px;top:-10px;position:relative;padding:10px 15px;background-color:#004a65;color:white;width:140px;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}

.type{display:none;}
.CTA,.details{border:1px solid #bec0c2;padding:10px 2px;top:-11px;position:relative;background-color:white;}    
.CTA{height:41px !important;width:138px;text-align:right;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}
.details{height:40px !important; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width:736px;display:inline-block;}  

   showFirst();

   function showFirst() {

     $('<span/>').html("first").appendTo($(".detailsText"));
     $(".detailsText").fadeIn(500).delay(1000).fadeOut(500,showSecond);

   }

   function showSecond() {

     $('<span/>').html("second ").appendTo($(".detailsText"));
     $(".detailsText").fadeIn(500).delay(3000).fadeOut(500);

     showFirst();
   }

are you looking for this..?http://stackoverflow.com/questions/17254442/how-to-fade-in-out-multiple-texts-using-css-jquery-like-on-droplr-animated-exam — Himesh Aadeshara, Sep 30 '15 at 06:43

score 2 · Accepted Answer · answered Sep 30 '15 at 06:30

You are appending text rather replacing it. I could figure out a minimal solution to this like below

$(document).ready(function() {
    var counterText = ["First", "Second", "Third"];
    var counter = 0;    
    setInterval(change, 1000);
    function change() {
        $('.detailsText').html(counterText[counter]);
        counter++;
        if(counter >= counterText.length) { 
          counter = 0; 
        }
    }  
})

 
.quotes {height:45px !important;margin-top:-17.5px;margin-bottom:17.5px;border:1px solid #bec0c2;padding:10px 0px;}

.typeBg{height:44px;top:-10px;position:relative;padding:10px 15px;background-color:#004a65;color:white;width:140px;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}

.type{display:none;}
.CTA,.details{border:1px solid #bec0c2;padding:10px 2px;top:-11px;position:relative;background-color:white;}    
.CTA{height:41px !important;width:138px;text-align:right;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}
.details{height:40px !important; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width:736px;display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2 class="quotes"><span class="typeBg"><span class="type">.</span></span> <span class="details"><a href="#"><span class="detailsText">.</span></a></span> <span class="CTA"><a href="#"><span class="CTAText">.</span></a></span></h2>

Checkout this http://codepen.io/anon/pen/zvNZMz

You're welcome. If that helped you, please be kind accept the answer! — Anand G, Oct 01 '15 at 06:58

Sim · Answer 2 · 2015-09-30T06:24:13.687

appendTo only append html to your existing html, so you always add one word. Use the html function to replace your previous word. The second problem is, that you have to set your showFirst method as callback of fadeOut in your second method (same like in function showFirst with show Second), because the execution of showFirst should be after doing the fade out. The third, if you do an fadeIn with 500 millis and a fadeOut with 500 millis, your animation duration is one second (1000 millis) and you don't need more delay.

Modify your code as follow:

   showFirst();

   function showFirst() {
     //Replace the hole html
     $('.detailsText').html("first");
     $(".detailsText").fadeIn(500).delay(0).fadeOut(500,showSecond);

   }

   function showSecond() {
     //Replace the hole html
     $('.detailsText').html("second");
     $(".detailsText").fadeIn(500).delay(0).fadeOut(500,showFirst);

   }

I hope, that solves your problem. Here is the codepen: http://codepen.io/anon/pen/BopWqg

That code gives 1 second between every text. If you want, the word 1 second in opacity: 1, then you can add more millis to your delay(1000).

score 1 · Answer 3 · answered Sep 30 '15 at 06:29

1

You need to read the function .appendTo().

"We can create content and insert it into several elements at once".It means the content is still there.

You can also see the demo, just click the button.

answered Sep 30 '15 at 06:29

liuzeyafzy

85
5

JQuery text fade in fade out

3 Answers3