-1

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

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

4

4 回答 4

2

这是最终对我有用的升级脚本 :) 我添加了一个名为“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);
于 2013-07-03T12:19:43.383 回答
1

更改您的条件if，删除,并添加您的条件，例如&&或||

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

也是increment您使用的相同号码，它们是$n和$nm不是nnm

喜欢，

 $n++;$nm++;

工作小提琴

于 2013-07-03T11:43:05.697 回答
1

将您的 CSS 从以下位置更改：

visibility:hidden;

至：

display:none;

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

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

于 2013-07-03T11:46:59.287 回答
1

我真的不明白预期的行为是什么。我做了一个例子，文本从下面出现，停了一会儿然后消失到最上面。

我改变了一点你的代码，希望我能帮忙。我没有在小提琴上发布代码，因为我不知道你们，但小提琴在这里不好（非常低，网关错误很差）。

这是JS。我已经使用了animateanddelay函数 insted of hideand 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;
}

使用选择器的强大功能，我删除了ids：

<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包装文本可能会起作用。

于 2013-07-03T12:34:53.043 回答