0

私は次のコードを持っています：

<div id="slideshow" >
    <div class="check">
        <img src="images/slideshow/image01.jpg" alt="Slideshow Image 1" />
    <p>Some paragraph</p>
    </div>    
    <div>
        <img src="images/slideshow/image02.jpg" alt="Slideshow Image 2" />
        <p>Some paragraph</p>
    </div>
    <div>
        <img src="images/slideshow/image03.jpg" alt="Slideshow Image 3" />
        <p>Some paragraph</p>
    </div>
</div>

次のコードを使用してDIVを相互にフェードインおよびフェードアウトし、一種の画像スライドショーを作成するこのスライドショーメソッドを見つけました。

function slideSwitch() {

var $active = $('#slideshow DIV.check');

if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

var $next =  $active.next().length ? $active.next()
    : $('#slideshow DIV:first');

$active.addClass('last-active');

$next.delay(2000)
    .css({opacity: 0.0})
    .addClass('check')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('check last-active');
    });
}

$(function() {setInterval("slideSwitch()", 8000);});

ご覧のとおり、DIVでフェードインするクラス「チェック」が追加されています。私がやろうとしているのは、slideSwitch関数がクラス「check」をDivに追加したときにJqueryでチェックしてから、何かを実行することです。私はこれを試しましたが、機能しません：

if ($("#slideshow > div:nth-child(2)").hasClass('check')) {
    $("#slideshow > div:nth-child(2)").animate({marginTop: "-50px"}, 5000);
} else {
//Do nothing
}

最初の子をチェックするか、これを追加するだけで機能します（おそらく、HTMLコードで定義されたクラスがすでにあるためです）。

if ($("#slideshow DIV").hasClass... etc

しかし、アニメーションはすぐに開始されます。私が本当に望んでいるのは、2番目のDIVにJavaScriptでクラス「チェック」が割り当てられた直後に開始することです。助けてください！！！！！

4

1 に答える 1

1

上記のコードで呼び出されると、クラスはすぐに追加されます。そこにあなたのアニメーションを含めてみませんか？

$next.delay(2000)
    .css({opacity: 0.0})
    .addClass('check')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('check last-active');
        $("#slideshow > div:nth-child(2)").animate({marginTop: "-50px"}, 5000);

    });
}
于 2012-05-07T15:00:14.093 に答える