1

jQuery Cycle2 プラグインのコールバック イベントを使用してスライドショー スクリプトを作成します。div要素のフェード トランジションを使用した実際のサイクル自体。div内には画像があります。次に、コールバック イベントを使用して、画面の右から左に画像をアニメーション化します。次に、次のイベントにより、右側の画面から画像がアニメーション化されます。

スクリプトは機能しますが、私が抱えている問題は、イメージ アニメーションがフェード トランジションで順番に実行されることです。イベントがトリガーされるとすぐに、画像がスライドして見えなくなり、div が一斉にフェードアウトします。私が達成しようとしている効果は、次のモデルのようになります。

  • トリガーイベント
  • ディビジョンがフェードイン
  • 短い遅延
  • 画像アニメーションがスライドイン
  • トリガーイベント
  • イメージアニメーションがスライドアウト
  • 短い遅延
  • ディビジョンがフェードアウト

基本的に、サイクル プラグインのフェード トランジションが実行される前に、イメージ アニメーションを完了させたいと考えています。その遅延を設定する方法がわかりません。

参考までに、Cycle2 API: http://jquery.malsup.com/cycle2/api/

$('.slides').on('cycle-next, cycle-before', function(e, opts) {
    $('.slide.active img').each(function() {
        $(this).stop().animate({
            left: -3000,
        }, 1000);
    });
});

$('.slides').on('cycle-next', function(e, opts) {
    $('.slide.active img').each(function() {
        $(this).css({
            left: 3000,
            display: 'block'
        });
        $(this).stop().animate({
            left: 0
        }, 1000, 'easeOutQuad');
    });
});

誰でも提供できるヘルプは大歓迎です！

編集：作業スクリプトのクイックフィドルをセットアップします：http://jsfiddle.net/ardsN/

4

2 に答える 2

1

最もクリーンな方法は、これを Cycle2 プラグインCycle2 Advanced APIで定義することです

以下は、Malsup がシャッフルプラグインとタイルプラグインを使用してこれを行った方法です。

于 2013-04-08T15:31:39.920 に答える
0

この方法でスライダーの状態を取得してみてください:

jQ('.cycle-slideshow').data( 'cycle.opts').busy

あなたが使用することができます：

jQ( document ).ready(function() {
    jQ(document.documentElement).keypress(function (e) {
        if (e.keyCode == 39 && jQ('.cycle-slideshow').data( 'cycle.opts').busy !== true)
        {
           jQ('.cycle-slideshow').cycle("next");
        }
        if (e.keyCode == 37 && jQ('.cycle-slideshow').data( 'cycle.opts').busy !== true)
        {
            jQ('.cycle-slideshow').cycle('prev');
        }
    });
});
于 2014-05-27T16:04:36.933 に答える