1

ページ上に3つのインスタンス化された画像スライダーがあり、それらは次々にフェードインすることになっています。私はinnerfade.jsを使用しています

最初の1つは2秒後に開始し、2つ目は4秒後に開始し、3つ目は6秒後に開始するなど、異なる時間に開始するようにしたかったのです。したがって、最初の遷移は2秒後に発生する必要がありますが、次のフェードまで6秒である必要があります。

編集：ページが読み込まれ、1つずつフェードするときに同時に表示されることになっています。

これをどうやって達成できるかわかりません。setTimeoutと.delayを使用してみましたが、動作させることができませんでした。その理由は、おそらく私がJavascriptが苦手だからです。しかし、私はここでいくつかの助けをいただければ幸いです。

これは私が来ているところです：

$(document).ready(
    function(){
        $('#header-img-1').innerfade2({
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        });

        $('#header-img-2').innerfade2({
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        });

        $('#header-img-3').innerfade2({
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        });
    }
);

どうもありがとう。

4

4 に答える 4

0

setTimeoutそうです、関数を使用してスクリプトの実行を遅らせることができdelayます。

setTimeout使用例は次のとおりです。

setTimeout(function(){
        $('#header-img-2').innerfade2({
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        });
    },2000 /*2seconds*/);

あなたについて.delay()はそのようにコーディングする必要があります：

$('#header-img-2').delay(2000).innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    type: 'random_start',
    containerheight: '1em'
});
于 2012-11-06T17:51:18.173 に答える
0 
$(document).ready(function() {
    var numb = [1,2,3];

    $.each(numb, function(i,elm) {
        setTimeout(function() {
            $('#header-img-'+numb[i]).innerfade2({
                animationtype: 'fade',
                speed: 750,
                timeout: 6000,
                type: 'random_start',
                containerheight: '1em'
            });
        },numb[i]*2000);
    });
});

フィドル

于 2012-11-06T17:54:44.617 に答える
0

以下のアプローチを試してください、私はいくつかの仮定に基づいてそれを少し最適化しました..しかしこれはあなたにアイデアを与えるでしょう。違うか教えてください。

$(document).ready(function() {

        var innerFadeOpt = {
            animationtype: 'fade',
            speed: 750,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1em'
        };

        var ptr = 0, headerImgs = ['#header-img-1', '#header-img-2', '#header-img-3'];

        var timer = setInterval (function () {
           if (ptr == headerImgs.length - 1) {
              clearInterval(timer);
              return;
           }

           $(headerImgs[ptr++]).innerfade2(innerFadeOpt);
        }, 2000);
    }
);
于 2012-11-06T17:55:06.723 に答える
0

setTimeoutを使用して、探している種類のインタラクションを実現する方法の簡単な例を次に示します。

http://jsfiddle.net/zFMjf/

HTML

<div id="example1" class="con orange" style="display:none;">Example 1</div>
<div id="example2" class="con lime" style="display:none;">Example 2</div>
<div id="example3" class="con yellow" style="display:none;">Example 3</div>​

CSS

.con { width:200px; line-height:60px; margin:0 0 20px 0; }
.orange { background:orange; }
.lime { background:lime ; }
.yellow { background:yellow ; }

jQUERY

setTimeout(function(){
   $('#example1').slideToggle();
},2000);

setTimeout(function(){  
    $('#example2').slideToggle();
},4000);

setTimeout(function(){  
    $('#example3').slideToggle();
},6000);​
于 2012-11-06T17:56:28.857 に答える