Fiddle Demo

Question

我想编写一个代码，可以切换两个淡入和淡出的句子。但是我想在相同的位置切换句子，即一个文本淡出而另一个开始代替第一个。在这种情况下，句子一个在另一个之下。有没有什么方法可以做到这一点，因为在HTML内容总是一个低于另一个。

这是jquery脚本。

<script>
 $(document).ready(function(){
 $(function(){
       $("#hide1").hide();
       while(1)
      {
       $("#hide2").fadeOut(3000);
       $("#hide1").fadeIn(3000);
       $("#hide1").fadeOut(3000);
       $("#hide2").fadeIn(3000);
     }
 });
});
</script>

HTML

<p id="hide1"> Hide 1 <p>
<p id="hide2"> Hide 2 <p>

Answer 1

<强> Demo 尝试这样做队列和动画

  $("#hide1").hide();

function hide1() {
    $("#hide2").fadeIn(3000);
    $("#hide2").fadeOut(3000, hide2);
}

function hide2() {

    $("#hide1").fadeIn(3000);
    $("#hide1").fadeOut(3000, hide1);
}
hide1();

OR Chaining

$("#hide1").hide();

function hide1() {
    $("#hide2").fadeIn(3000).fadeOut(3000, hide2);
}

function hide2() {
    $("#hide1").fadeIn(3000).fadeOut(3000, hide1);
}
hide1();

此代码会动态响应，即使您要将此效果应用于两个以上的p元素，也不需要进行任何更改

$("p").hide();

function test(elem) {
    elem.fadeIn(1000, function () {
        elem.fadeOut(1000, function () {
            test(elem.next('p').length ? elem.next('p') : $('p:first'));
        });
    });
}

test($('p:first'));

DEMO

Answer 2

试试这个：

setInterval(function () {
    $('#hide1').fadeOut(1000, function () {
        var $this = $(this);
        $this.text($this.text() == 'Hide 2' ? 'Hide 1' : 'Hide 2');
        $this.fadeIn(1000);
    });
}, 3000);

在setInterval功能中切换文字。

Fiddle Demo

Answer 3

使用单个段落标记，并在尝试淡入淡出时切换其中的文本。

$(document).ready(function(){
    $(function(){
        window.setInterval(function() {
            $("#hideorshow").fadeToggle(1000, "linear", function() {
                $("#hideorshow").text($("#hideorshow").text() === "Hide 1" ? "Hide 2" : "Hide 1");
                $("#hideorshow").fadeToggle(1000, "linear");
            });            
        }, 2000);
    });
});

此外，我建议您使用fadeToggle()代替fadeIn()和fadeOut()。

这是一个有效的JSFiddle demo。

在同一位置淡入和淡出文本

3 个答案:

DEMO

Fiddle Demo