0

こんにちは、この方法で所定の時間を循環するこのコードがあります。

var array = [
    "tip 01",
    "tip 02",
    "tip 03",
    "Tip 04",
    "Tip 05",
];
var i = 1;
var pippo = $("#div");

setInterval(function() {            
     pippo
        .fadeToggle()
        .html(array[i]);
        i++;
if (i == array.length){i=0;}

    }, 7000);

そのため、div の内容は配列のセルになります。ご覧のとおり、この #div には fadeToggle 効果が適用されているため、#div が表示されている場合はフェードアウトし、その逆も同様です。

問題は、アニメーションが適切に機能しないことです。

アニメーションが始まると、最初に #div コンテンツ (アニメーションなし) が表示され、フェードアウトしてフェードインします...

#div がフェードインとフェードアウトするだけでいいと思います。

私が気づいたと思うのは、サイクルが7秒間に2回ループするようなものです。私が書いた場合：

setInterval(function() {            
     pippo
        .fadeIn()
        .html(array[i])
        .fadeOut();
        i++;
if (i == array.length){i=0;}

    }, 7000);

フェード効果は、フェード イン フェード アウト フェード イン フェード アウト フェード インのように 2 回アクティブになり、7 秒が経過すると再びアクティブになります。

このアニメーションをスムーズにするにはどうすればよいですか? 事前にどうもありがとう

4

2 に答える 2

2

フェードアウトしたい場合 HTML フェードインを変更すると、これを行うことができます 

var array = [
"tip 01",
"tip 02",
"tip 03",
"Tip 04",
"Tip 05",
];
var i = 0;
var pippo = $("#div");
function f(){
    pippo.fadeOut(function(){
        pippo.html(array[i]).fadeIn(function(){
            i++;
            if (i == array.length){i=0;}
            setTimeout(f, 7000);
        });
    });
}
setTimeout(f, 7000);

jsfiddle

于 2013-05-31T17:45:56.577 に答える