Jquery Word for Word Fade in Effect

Jquery word for word fade in effect

Here's a simple approach that you can build on. It creates the needed spans and fades them in based on interval value you set.

var fadeInterval = 300

$('h1').html(function(_, txt){
    var words= $.trim(txt).split(' ');
    return  '<span>' + words.join('</span> <span>') + '</span>';
}).find('span').each(function(idx, elem){        
    $(elem).delay(idx * fadeInterval).fadeIn();
});

DEMO

fading a paragraph in word by word using jquery?

Text by itself can't have an opacity, therefore you must wrap the text with an element that can have opacity (such as a span). You can then fade in those spans.

Try this:

http://jsfiddle.net/6czap/

var $el = $(".example:first"), text = $el.text(),
    words = text.split(" "), html = "";

for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + " </span>";
}

$el.html(html).children().hide().each(function(i){
  $(this).delay(i*500).fadeIn(700);
});

Update for benekastah: http://jsfiddle.net/6czap/3/

var $el = $(".example:first"), text = $.trim($el.text()),
    words = text.split(" "), html = "";

for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + ((i+1) === words.length ? "" : " ") + "</span>";
};
$el.html(html).children().hide().each(function(i){
  $(this).delay(i*200).fadeIn(700);
});
$el.find("span").promise().done(function(){
    $el.text(function(i, text){
       return $.trim(text);
    });            
});

Word by word fade in animation javascript/jquery

Implement the text to time function, as you wish.
It is a simple code, but you can improve it.

var $el = $(".example:first"), text = $.trim($el.text()),
    words = text.split(" "), html = "";

for (var i = 0; i < words.length; i++) {
    html += "<span style=\"display:none\">" + words[i] + ((i+1) === words.length ? "" : " ") + "</span>";
}
elements = $el.html(html).children();

function text_to_time(text){
    // implement your function
    times = [100, 100, 100, 100, 100, 1000, 1500, 1500, 2000, 2000];
  return times[text.length];
}

function next_word(i, _elements){
    element = _elements[i];
  element = $(element);
  
  element.fadeIn(500, function() {
      i = i + 1;
    if (_elements.length > i){
        time = text_to_time($(_elements[i]).text());
        setTimeout(function() {
            next_word(i, _elements);
      }, time);
    }
  });
}

setTimeout(function() {
  next_word(0, elements);
}, 1000);

.example{
  font-size:5vw;
  font-weight:700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="example">
    Ohne uns wäre es einfach
</div>

jQuery Fade In / Fade Out Text, then Fade In new text

The second piece of text must be hidden by default. That can be done with a CSS class.

Then, once you fade in the .partner text, don't fade it out. So, the innermost effect should be removed. You were on the right track with that, but it looks like you forgot to remove the } that goes with the fadeOut function, which caused a syntax error.

Also, there is no need for embedded span elements inside your h1 elements in this case since the entire text is in the span and the span is the only thing in the h1.

Lastly (FYI) don't use inline styles when classes allow for much simpler duplication of styles and create less clutter in the HTML.

jQuery(document).ready(function(){  $(".hellothere").fadeOut(2000,function(){    $(".partner").fadeIn(10000);  });});

.partner {  display:none;}
.fontStuff {  font-size: 65px;   text-transform: uppercase;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1 class="hellothere font-168856 font-444086 fontStuff">Hello there.</h1><h1 class="partner font-168856 font-444086 fontStuff">Your partner in digital.</h1>

How i can fade in and fade out words after 5 seconds using jquery

jsBin demo with fade animation

HTML:

<h2> "We arrange these type of events like <span>marriage</span> "</h2>

jQuery:

var c=0, words=['marriage','birthday','annual dinner','school'];

function loop(){
  $('h2 span').delay(1000).fadeTo(300,0,function(){
     $(this).text( words[++c%words.length] ).fadeTo(300,1,loop);
  });
}    
loop(); // start it!

---

if you like more some real animations you could go for:

jsBin demo with slide animation

function loop(){
  $('h2 span').delay(1000).animate({top:-50},300,function(){
    $(this).css({top:100}).text( words[++c%words.length]).animate({top:0},300,loop);
  });
}
loop(); // start it!

having h2{overflow:hidden} and h2 span{position:relative;}

Just make sure to use a H2 more specific selector like $('#fade_title span')

JQuery text fade in fade out

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>

Fade in letter by letter with JQuery

you need to retrieve the text with .text(), then split it with a delimiter of your choice (space to get a list of words, or empty string to get a list of characters), then create a span for each of the items in the list and append it to a container on your page(and fade them if you want):

$(function() {  //get the welcome msg element  var $all_msg = $('#welcome_msg');  //get a list of letters from the welcome text  var $wordList = $('#welcome_msg').text().split("");  //clear the welcome text msg  $('#welcome_msg').text("");  //loop through the letters in the $wordList array  $.each($wordList, function(idx, elem) {    //create a span for the letter and set opacity to 0    var newEL = $("<span/>").text(elem).css({      opacity: 0    });    //append it to the welcome message    newEL.appendTo($all_msg);    //set the delay on the animation for this element    newEL.delay(idx * 70);    //animate the opacity back to full 1    newEL.animate({      opacity: 1    }, 1100);  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="welcome_msg">Welcome to the example snippet</div>

fading-in every word of a paragraph in different random time effect

Another way is using css transitions

JS:

$('body').children('.word').each(function() {
    var word = this;
    setTimeout(function () {
        $(word).css("opacity", 1);
    }, Math.random() * 3000)
});

CSS:

.word {
  opacity: 0;
  display: inline-block;
  transition: opacity 1s linear;
}

http://jsfiddle.net/n427mLb8/

You could eliminate using wrappers around each word using javascript like that:

$('.content').html($('.content').text().split(/[\s,\.]+/).map(function (word) {
    return '<div class="word">' + word + '</div>'
}).join(''))

http://jsfiddle.net/6e948j26/

jQuery text fade/transition from one text to another?

You can use callbacks, like this:

$("#container").fadeOut(function() {
  $(this).text("World").fadeIn();
});

You can give it a try here, or because of how the queue works in this particular case, like this:

$("#container").fadeOut(function() {
  $(this).text("World")
}).fadeIn();

This executes the .text() call when the .fadeOut() is complete, just before fading in again.

---

Related Topics