-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

1

条件を変更し、またはのように条件ifを削除,して追加します&&||

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

また、あなたが使用しているのとincrement同じ番号です。$n$nmnnm

お気に入り、

 $n++;$nm++;

働くフィドル

于 2013-07-03T11:43:05.697 に答える
1

期待される動作が何であったかはよくわかりません。テキストが下から表示され、しばらく停止してから、一番上まで上昇して消えるという例を作成しました。

コードを少し変更しました。何かお手伝いできることを願っています。皆さんにはわからないので、コードをフィドルに投稿しませんが、ここではフィドルは問題ありません（ゲートウェイエラーが非常に少なく、非常に低い）。

これがJSです。andの代わりにanimateanddelay関数を使用しました：hideshow

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 に答える