1

コードは次のとおりです：http：//jsfiddle.net/duNHJ/2/

基本的に、すべてのdivにアニメーションがあるため、[次へ]または[前のスライダー]をクリックすると、アニメーションスクリプトはアクティブ化されたdivでのみ実行されます。現在、最初にそれらすべてをアニメートします。

http://www.malsup.com/jquery/cycle/を使用

また、アクティブ化されたdivにアクティブなクラスを追加するにはどうすればよいですか？

4

2 に答える 2

1

最初の懸念事項に関しては、何が必要かわかりませんでしたが、アクティブ状態クラスの追加/削除に関しては、次の例を参照してください。

http://jsfiddle.net/duNHJ/27/

于 2012-04-10T22:24:53.523 に答える
0

スクリプトは、ロードされるとすぐに実行されます。また、セレクター$('.test')を使用すると、クラスがクラスのすべての要素でアニメーションが実行されますtest。divが変更されたときにアニメーション化する必要があります。jQuery Cycle Pluginは、これを行うためのコールバックメソッドを提供します。

$('#example').cycle({ 
    fx:     'scrollLeft', 
    timeout: 5000, 
    before:  onBefore, 
    after:   onAfter 
});

関数onBefore()が遷移の前にonAfter()呼び出され、後に呼び出される場所。あなたの場合は、次を使用してくださいonAfter()（そしてインラインスクリプトを削除してください）：

function onAfter() {
    // $(this) references the current slide
    $(this).animate({
        top: "100px"
    }, 1000);
}

$('#s6').before('<div id="nav">').cycle({
    fx: 'fade',
    timeout: 6000,
    delay: -2000,
    pager: '#nav',
    next: '#next2',
    prev: '#prev2',
    activePagerClass: 'activeSlide',
    after: onAfter
});

デモ： http： //jsfiddle.net/jtbowden/cmwc3/

どんなアニメーションを作りたいのか正確にはわかりませんが、これで始められるはずです。

于 2012-04-10T21:44:09.300 に答える