Question

我正在尝试使用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>

这是CSS

    .texting
{
    visibility:hidden;
    position:absolute;
    top:300px;
    right:300px;
}

这是脚本

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

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

Answer 1

这是最终为我工作的升级脚本:)我添加了一个名为“texting0”的新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);

Answer 2

更改条件if，删除,并添加&&或||

等条件

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

increment您使用的是同一个号码，它们是$n而$nm不是n和nm

等

 $n++;$nm++;

Working Fiddle

Answer 3

更改您的CSS：

visibility:hidden;

为：

display:none;

见这里：http://jsfiddle.net/balintbako/qyjsq/

（你也需要这个动画的jquery-ui：$("#texting"+$n).hide("drop",{direction:"up"},1000);，你有）

Answer 4

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

我改变了一些你的代码，希望我可以提供帮助。我没有在小提琴上发布代码，因为我不知道你们这些人，但是小提琴在这里并不好（非常低，网关错误很糟糕）。

这是JS。我使用了animate和delay和hide的{{1}}和show函数：

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);

刚删除了visibility属性（我只是在非常具体的情况下使用它），并添加了opacity以获得更好的效果：

.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>

我的代码正在更改top属性。我不会在你的页面上创建滚动条。如果您对此有疑问，我相信并且div包装文本可能会有效。

使用JQuery滑动div

4 个答案: