jQuery 的文本幻灯片在 <br> 时无法正常运行

Question

我正在尝试创建一个简单的文本幻灯片放映，它在一个短语和另一个短语之间转换并自行循环播放，但是当我向文本添加中断规则时，幻灯片放映似乎无法正常运行。它仅在文本为单行时有效。非常感谢您的帮助。

这是代码和 jsFiddle：http://jsfiddle.net/rezasan/fnbn8sbc/

//HTML
<div id="index_splashtext">
  <h3>An<br/>Intimate<br/>Hideaway</h3>
  <h3>A<br/>Paradise<br/>Preserved</h3>
</div>

//CSS
#index_splashtext {
  width:311px;
  margin:0 auto;
  height: 330px;
  margin-top: 25px;
  text-align:center;
}
#index_splashtext h3 {
  position: absolute;
  font-size: 4.5em;
  line-height: 1.2em;
  font-family: "adobe-garamond-pro",sans-serif;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin-bottom: 70px;
  color: red;
}

//jQuery
$(function(){
    $('#index_splashtext h3:gt(0)').hide();
    setInterval(function(){
    $('#index_splashtext :first-child').fadeOut(2500)
    .next('h3').fadeIn(2500)
    .end().appendTo('#index_splashtext');}, 
    8000);
});

Answer 1

您想使用 $('#index_splashtext h3:first') 而不是 $('#index_splashtext :first-child')。在这种情况下，:first-child 也被应用到 <br /> 元素，因此它们被隐藏但永远不会消失：

$(function () {
    $('#index_splashtext h3:gt(0)').hide();
    setInterval(function () {
        $('#index_splashtext h3:first').fadeOut(2500)
            .next('h3').fadeIn(2500)
            .end().appendTo('#index_splashtext');
    },
    8000);
});

jsFiddle example

Answer 2

好吧，这就是我达到你想要的效果的方式，而且它也是可扩展的:)

html:

<div id="index_splashtext">
<h3></h3>
</div>

javascript:

$(function(){
    var messages=[];
    var counter=0;
    var fadeInLength = 2500;
    var fadeOutLength = 2500;
    var hold = 1000;
    messages.push('An<br />Intimate<br />Hideaway');
    messages.push('A<br />Paradise<br />Preserved');

    $('#index_splashtext h3').hide();

    setInterval(function(){
        $('#index_splashtext :first-child').
        html(messages[counter]).
        fadeIn(fadeInLength).
        delay(hold).
        fadeOut(fadeOutLength);

        counter++;
        if(counter > messages.length-1){counter=0;}
        },fadeInLength+fadeOutLength+hold + 1000);
});

jQuery 的文本幻灯片在 <br> 时无法正常运行

Text slideshow with jQuery not functioning correctly when there's <br>

html

javascript

css

jquery

slideshow