CODEWITHSUNDEEP
javascriptjqueryhtmlfadein
Michael Sullivan
Michael Sullivan

Reputation: 23

Fixing Fading Text Using fadeToggle() in JQuery

I'm trying to use fadeToggle() to make text from an array fade in, wait 10 seconds, than fade out for another text to do the same thing.

This code makes the text switch every few seconds perfectly, i just can't get the right code to make it fade in/out:

var texts = [" \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", " \"  Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex ; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", " \” The value of an idea lies in the using of it. \“ <br /> ~ Thomas Edison "];
var count = 0;

$(document).ready(function() {
  function changeText() {
    $(".quote").html(texts[count]);
    count < texts.length ? count++ : count = 0;
  }

  setInterval(changeText, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="quote">Hello</h1>

Upvotes: 0

Views: 292

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337656

To cross-fade in text you need to put them in separate elements and fade them in/out as needed. You cannot achieve a fade just by changing the text property of an element.

With that in mind you can place the h1 elements within a contained and position them absolutely so that they overlap. You can then use chained setTimeout calls to fade the needed content. Try this:

var texts = [" \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", " \"  Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex ; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", " \” The value of an idea lies in the using of it. \“ <br /> ~ Thomas Edison "];
var count = 0;

$(document).ready(function() {
  function changeText() {
    $('.quote').fadeOut(function() {
      $(this).remove();
    });
    $('<h1 class="quote">' + texts[count % texts.length] + '</h1>').appendTo('.quote-container').fadeIn();
    count++;
    setTimeout(changeText, 3000);
  }

  changeText();
});
.quote-container h1 { 
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quote-container">
  <h1 class="quote">Hello</h1>
</div>

Also note the use of the modulo operator (%) over the ternary to check the count value.

Upvotes: 2

Rounin
Rounin

Reputation: 29511

A different approach.

I understand that the question asks about jQuery fadeToggle(), but I'd want to suggest that CSS @keyframes is probably the best tool for this kind of animated presentation.

Working Example using CSS:

var texts = [
    " \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ",
    " \"  Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs",
    " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs",
    " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ",
    " \" The value of an idea lies in the using of it. \" <br /> ~ Thomas Edison "
];


var count = 0;
var quote = document.getElementsByClassName('quote')[0];

function changeText() {
    quote.innerHTML = (texts[count]);
    count < (texts.length - 1) ? count++ : count = 0;
}

setInterval(changeText, 6000);
.quote {
animation: fadeToggle 6s infinite;
}

@keyframes fadeToggle {
0% {opacity: 0;}
33% {opacity: 1;}
66% {opacity: 1;}
100% {opacity: 0;}
}
<h1 class="quote">Hello</h1>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

You can follow this logic:

  1. Fade out.
  2. Change text.
  3. Fade in.

var texts = [" \" It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them. \" <br /> ~ Steve Jobs ", " \"  Design is not just what it looks like and feels like. Design is how it works \" <br /> ~ Steve Jobs", " \" That’s been one of my mantras — focus and simplicity. Simple can be harder than complex ; you have to work hard to get your thinking clean to make it simple. \" <br /> ~ Steve Jobs", " \" The present is theirs ; the future, for which I really worked, is mine. \" <br /> ~ Nikola Tesla ", " \” The value of an idea lies in the using of it. \“ <br /> ~ Thomas Edison "];
var count = 0;

$(document).ready(function() {
  function changeText() {
    $(".quote").fadeOut(250, function () {
      $(this).html(texts[count]).fadeIn(250);
    });
    count < texts.length ? count++ : count = 0;
  }
  setInterval(changeText, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="quote">Hello</h1>

Upvotes: 2

Related Questions