2

フェードイン/アウト効果を使用して 3 つの div 要素を遷移させる簡単な関数を作成しました。ユーザーがリンクをクリックすると、イベントがトリガーされます。これが私のコードです：

$(".link1").click(function () {
   $(".feature1").fadeIn(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeOut(1000);
});

$(".link2").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeIn(1000);
   $(".feature3").fadeOut(1000);
});

$(".link3").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeIn(1000);
});

これらの遷移が約 8 秒ごとに自動的に行われるように、ある種のタイマーを設定できる必要があります。また、基本的に「ループ」して、セットの 3 番目の div に到達すると最初の div に戻るようにしたいと考えています。

4

4 に答える 4

2

こういうことですか？

setInterval(myFunction,8000);

javascript の setInterval 関数は、2 番目のパラメーターで設定された 8 秒ごとに (この場合) 関数を実行します。関数を呼び出すときに括弧がないことに気付くでしょう。

次のように無名関数を呼び出すこともできます。

setInterval(function(){alert("Hello")},3000);

クリックイベントを介してこれを制御できるようにしたい場合は、次のようにすることができます。

var loop;
$(elem).click(function(){
    loop = setInterval(fades,8000);
});

function fades(){
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeIn(1000);
    $(".feature3").fadeOut(1000);
}

そして、次の方法でループを停止できます。clearInterval(loop);

于 2012-08-16T06:15:14.627 に答える
1

http://jsfiddle.net/F4X46/1/

var i = 1,
    t;

function makeTO() {
    t = setTimeout(function() {
        console.log('test');
        if (i++ === 3) {
            i = 1;
        }
        $(".link" + i).trigger('click');
    }, 8000);
}
$(".link1").click(function() {
    i = 1;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeIn(1000);
    $(".feature2").fadeOut(1000);
    $(".feature3").fadeOut(1000);
});

$(".link2").click(function() {
    i = 2;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeIn(1000);
    $(".feature3").fadeOut(1000);
});

$(".link3").click(function() {
    i = 3;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeOut(1000);
    $(".feature3").fadeIn(1000);
});
makeTO();
于 2012-08-16T06:15:50.227 に答える
0

jQuery のタイミングの問題については、プラグインjquery-timingを使用します。

jQuery ですべての .feature* を選択してから、次のようにします。

$(".feature1,.feature2,.feature3").repeat()
    .each($).fadeIn(1000).siblings().fadeOut(1000).wait(3000).all()

良い。ではない？

jsfiddleで実行されているこれを参照してください。

于 2012-08-21T10:29:51.080 に答える
0

私は何かを試しました。ワーキングデモをご覧ください

HTML

<a class="link1" href="javascript:void(0)"> Link1 </a>
<a class="link2" href="javascript:void(0)" > Link2 </a>
<a class="link3" href="javascript:void(0)" > Link3 </a>
<div class="feature1">Feature1 div</div>
<div class="feature2">Feature2 div</div>
<div class="feature3">Feature3 div</div>​

CSS

a { font:bold 13px verdana; padding:4px}
div { border:1px solid grey; padding:3px;width:150px;height:90px;margin:3px;}
.feature1 { background-color: #f00; }
.feature2 { background-color: #0f0; }
.feature3 { background-color: #00f; }​

jQuery

(function () {
    var i =0;
    var doFade= function() {        
        i = (i%3)+1;
        //console.log(i);
        $("div[class^=feature]").fadeOut(1000);
        $('.feature'+i+'').fadeIn(1000);                
    };
    doFade();
    window.setInterval(doFade, 2000);
})();​
于 2012-08-16T07:10:06.250 に答える