Text carousel crossfade effect?

问题

We're trying to implement a simple text carousel that replaces a single word in a sentence with a few other words. They will fade in/out and the containers width should shrink/enlarge to accomodate the new word. Sounds simple enough but we're having a hard time.

Should function like the second line on www.branch.com.

Can't find a plugin for this? Image carousel sure, but not text, and not one that changes the preceding container.

It goes through the words but the container needs to change widths.

    $('#caption p:gt(0)').hide();
    setInterval(function() {
        $('#caption span:first-child').fadeOut('slow')
           .next('span').fadeIn('slow')
           .end().appendTo('#caption');
    }, 2000);

This is the

 <div id="caption">
      <span>best</span>
      <span>ultimate</span>
      <span>excellent</span>
      <span>fantastic</span>
   </div>

website in town.

#container {
   position: relative;
}

#container p {
   position: absolute; 
   top: 0; 
   left: 0;
}

Any suggestions?

回答1:

If you want to achieve a more branch.com-like effect, you'll need the following additions/changes":

Regarding CSS:

#caption needs:

padding: 0px;
display: inline-block;
position: relative;
vertical-align: bottom;
transition: width 0.25s linear;

#caption > span needs:

position: absolute;
top: 0px;
left: 0px;

Regarding JS:
You'll need to explicitely set #caption's width to the width of the shown element (each time a transition happens), using soimething like this:

$("#caption").css("width", $(<the_element_to_be_shown>).width());

You'll also have to set the initial width and height:

$("#caption").css("width", $("#caption > span:first-child").width());
$("#caption").css("height", $("#caption > span:first-child").height());

I put it all together in this short demo.

回答2:

i hope this will do the trick http://jsfiddle.net/JVuEv/

function ticker() {
    var caption = $('#caption');
    var elements = caption.children();
    $(elements[0]).fadeOut('slow', function () {
        caption.append($(this));
        $(elements[1]).show();
    });
}

来源：https://stackoverflow.com/questions/16642779/text-carousel-crossfade-effect

标签

jquery

fade