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

我想写一个代码，可以切换两个句子淡入淡出。但我想在同一个位置切换句子（一个文本淡出，另一个开始代替第一个）。在这种情况下，句子一个接一个地出现。有什么方法可以做到这一点，因为在html中，内容总是一个接一个

这是jquery脚本

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

$（文档）.ready（函数（）{
$（函数（）{
$（“#hide1”）.hide（）；
而(1)
{
美元（“#hide2”）。淡出（3000）；
$（“#hide1”）。法代因（3000）；
美元（“#hide1”）。淡出（3000）；
$（“#hide2”）。法代因（3000）；
}
});
});

Html

隐藏1 隐藏2 像这样尝试创建队列并设置动画

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

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

function hide2() {

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

还是锁链

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

试试这个：

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

在

setInterval

功能中切换文本

---

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

$(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（）

---

这是一个有用的方法。

你能分享JSFIDLE吗？“我有没有办法做到这一点，因为在html中，内容总是一个接一个地出现。”这是你想要的还是应该取代以前文本的位置？试试样式中的绝对位置

隐藏1

隐藏2

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