文字轮播交叉淡入淡出效果? [英] Text carousel crossfade effect?

问题描述

我们正在尝试实现一个简单的文本轮播，该文本轮播将句子中的单个单词替换为其他几个单词.它们将淡入/淡出，并且容器的宽度应缩小/放大以适应新单词.听起来很简单，但我们很难过.

功能应类似于 www.branch.com 上的第二行.

找不到为此的插件?图像轮播是确定的，但不能是文本，并且不能更改前一个容器.

它通过单​​词，但是容器需要改变宽度.

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

这是

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

镇上的网站.

#container {
   position: relative;
}

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

有什么建议吗?

解决方案

如果要获得更像branch.com的效果，则需要进行以下添加/更改:

关于CSS :

#caption需要:

• 填充:0px;
• 显示:inline-block;
• 位置:相对；
• vertical-align:bottom;
• 过渡:宽度0.25s线性；

#caption > span需要:

• 位置:绝对；
• 顶部:0像素；
• 左:0px;

关于JS :
您需要使用类似这样的方法将#caption的宽度明确设置为所显示元素的宽度(每次发生过渡时):

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

您还必须设置初始宽度和高度:

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

我在此 简短演示 中将所有内容放在一起.

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?

解决方案

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.

这篇关于文字轮播交叉淡入淡出效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！