Question

我一直在寻找一个jQuery动画，不断改变段落中的文字。我在这里找到了一个解决方案：Text changing with animation jquery。问题是我想在段落下面有一个自举按钮，当不透明度为空时，按钮上下移动。

QRegExp

var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;

$("#description").fadeOut("slow");

setInterval(function(){
    $("#description").stop().html(text[index]).fadeIn("slow",function(){
        index++;
        $("#description").delay(400).fadeOut("slow");
        if (index == 5) {
            index = 0;
        };
    });
},1800);

您可以在小提琴上看到问题：https://jsfiddle.net/km19e3jf/2/

Answer 1

正如Alexis提到的fadeOut和fadeIn将元素的显示属性从block更改为hide，因此#description在fadeOut时完全失去了它的高度{1}}被调用。

并不是说Alexis的回答不够好（太棒了！），但我想我提供的另一种方法除了代码中已有的内容之外不需要其他更新：

var text  = [ "text1", "text2", "text3", "text4", "text5" ];
var index = 0;

$("#description").fadeTo( 1, 0 );

setInterval( function(){
    $( "#description" ).stop().html( text[ index ] ).fadeTo( 500, 1, function(){
        index++;
        $( "#description" ).delay( 400 ).fadeTo( 500, 0 );
        if ( index == 5 ) {
            index = 0;
        };
    } );
}, 1800 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     <p id="description">text 1</p>
</div>

修改您的脚本以使用fadeTo，因为它会更改不透明度而不是元素的显示属性：

工作小提琴here。

Answer 2

您可以添加容器以在文本周围设置固定高度。

fadeOut和fadeIn将元素的显示更改为block和hide。

所以下面的元素会移动。

＆＃13;

var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;

$("#description").fadeOut("slow");

setInterval(function(){
    $("#description").stop().html(text[index]).fadeIn("slow",function(){
    	index++;
        $("#description").delay(400).fadeOut("slow");
    	if (index == 5) {
        	index = 0;
    	};
    });
},1800);

＆＃13;

.container{
  height:25px;
}

#description{
  margin:0;
  padding:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p id="description"></p>
</div>

<p>Hello world</p>

＆＃13;

Answer 3

fadeOut函数在动画后的元素上显示无，这会导致跳转。而不是使用fadeOut，你应该使用.css来改变不透明度。

$("#description").delay(400).css({'opacity': 0});

在您的CSS中

，将transition-duration: 400ms;添加到#description以设置动画。

使用jQuery不断更改段落内的文本

3 个答案: