Question

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

应该像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;
}

有什么建议吗？

Answer 1

我希望这会解决问题http://jsfiddle.net/JVuEv/

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

Answer 2

如果您希望获得更多类似branch.com的效果，则需要进行以下添加/更改“：

关于CSS ：

#caption需要：

padding：0px;
display：inline-block;
职位：亲属;
vertical-align：bottom;
过渡：宽度0.25s线性;

#caption > span需要：

position：absolute;
top：0px;
left：0px;

关于JS ：
你需要明确地将#caption的宽度设置为所显示元素的宽度（每次转换发生时），使用如下所示的soime：

$("#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());

我在 short demo 中将它们全部放在一起。

文字轮播交叉淡入淡出效果？

2 个答案: