Javascript 使用JQuery滑动div

我试图使用JQuery实现这种效果，其中一个文本滑入，停留几秒钟，然后滑出，然后下一个文本取而代之

这是HTML

<div class="texting" id="texting1" style="visibility:visible;">This is text 1</div>         
<div class="texting" id="texting2">This is text 2</div>
<div class="texting" id="texting3">This is text 3</div>
<div class="texting" id="texting4">This is text 4</div>

这是剧本

$n=1;
    $nm=2;
    var i = setInterval(function(){
        $("#texting"+$n).hide("drop",{direction:"up"},1000);
        $("#texting"+$nm).show("drop",{direction:"up"},2000);
        $n++; $nm++;
        if ($n==4, $nm==5)
        {$n=0;$nm=1;}
    },3000);    

---

请告诉我我哪里做错了？感谢您

如果更改您的条件，请删除，并添加您的条件，如&&或

if ($n==4 && $nm==5)
{
   $n=0;$nm=1;
}

另外，

increment

与您使用的数字相同，它们是

$n

和

$nm

而不是

n

和

nm

像

将CSS更改为：

visibility:hidden;

致：

请看这里：

---

（这个动画还需要jquery用户界面：

$（“#texting”+$n）.hide（“drop”{direction:“up”}，1000）；

，你已经有了）

这是升级后的脚本，它最终对我有效：）我添加了一个名为“texting0”的新div

---

我真的不明白预期的行为是什么。我做了一个例子，文本从下面出现，停止一段时间，然后上升到顶部消失

我对你的代码做了一点修改，希望能对你有所帮助。我没有在fiddle上发布代码，因为我不知道你们的情况，但是fiddle在这里不好（非常低，有严重的网关错误）

这是JS。我使用了

动画

和

延迟

功能，而不是

隐藏

和

显示

：

var n=0;
var i = setInterval(function(){
    $('.texting').eq(n).css({display:'inline-block'}).animate({top:100, opacity:1}, 1000, function(){
        $(this).delay(1000).animate({top:0, opacity:0}, 1000, function() {
            $(this).css({display:'none', top:300});
        });
    });
    n++;
    if (n == $(".texting").length) { n = 0; }
}, 3000); 

刚刚删除了

可见性

属性（我只是在非常特殊的情况下使用它），并添加了

不透明度

以获得更好的效果：

.texting
{
    display:none;
    opacity:0;
    position:absolute;
    top:100px;
    right:300px;
}

使用选择器的功能，我删除了

id

s：

<div class="texting">This is text 1</div>         
<div class="texting">This is text 2</div>
<div class="texting">This is text 3</div>
<div class="texting">This is text 4</div>

这是文本1
这是文本2
这是文本3
这是文本4

---

我的代码正在更改

top

属性。我不知道它是否会在你的页面上创建滚动条。如果你对此有问题，我相信和

div

包装文本可能会奏效。

@Sergio请解释为什么这会有任何不同：）你为什么要自己写？最好使用@Sergio之类的工具。是的，我也尝试过，但没有$。你能创建一个JSFIDLE来说明你的问题吗？谢谢，但这没有任何区别。文本1可见，滑出，但没有新的：（还有@RohanKumarYes的建议修复，我有jquery用户界面。你会看到无休止的旋转循环有一个小故障，因为第四个div在第一次显示后总是可见的

var n=-1;
var i = setInterval(function(){
    $("#texting"+(n+1)).show("drop",{direction:"down"},2000);
    $("#texting"+n).hide("drop",{direction:"up"},1000);
    n++;
    if (n==5)
    {
    n=0;
    $("#texting0").show("drop",{direction:"down"},1000);
    }
},5000);    

var n=0;
var i = setInterval(function(){
    $('.texting').eq(n).css({display:'inline-block'}).animate({top:100, opacity:1}, 1000, function(){
        $(this).delay(1000).animate({top:0, opacity:0}, 1000, function() {
            $(this).css({display:'none', top:300});
        });
    });
    n++;
    if (n == $(".texting").length) { n = 0; }
}, 3000); 

.texting
{
    display:none;
    opacity:0;
    position:absolute;
    top:100px;
    right:300px;
}

<div class="texting">This is text 1</div>         
<div class="texting">This is text 2</div>
<div class="texting">This is text 3</div>
<div class="texting">This is text 4</div>