1

スライダーに jQuery Cycle プラグインを使用しています。スライダーが次のスライドに移動する前に、次のリンクがクリックされたときに関数を完了する必要があります。

現時点では、「before」関数が完了する前に次のアクションが発生するのを防ぐ方法がわかりません。以下のコードを使用しています。

$('#marques-slider').cycle({
fx: 'scrollHorz',
transition: 'scrollHorz',
timeout:  0,
prev:    '#prev-slide',
    next:    '#next-slide',
    pager:   '#nav', 
    easing: 'easeInOutExpo',
    speed:  1000,
    before:  slideUp, 
    after:   slideDown,
    startingSlide: 1
});

現在、私の onBefore 関数と次のスライド関数の両方が同時にアニメーション化されています。

また、プラグインの外に次のリンクを作成してみました:

            $('#next-slide').click(function(){
                $('.marques-product-content').animate({
                    height : '0'
                }, function(){
                    $('#marques-slider').cycle('next');
                });
                return false;
            });

ただし、これにより、スライドの背景画像がアニメーション化する前に変化し、機能が最初のクリックでのみ機能するというファンキーな動作が発生します:/

4

2 に答える 2

1

「次」関数がプラグイン メソッドを介して「前」が完了するのを待つ方法はないようです。

ただし、cycle.js コードを詳しく調べると、これらの行で次の関数を遅らせることができます。

var fn = function() {$n.delay(800).animate(opts.animIn, speedIn, easeIn, cb)};
$l.delay(800).animate(opts.animOut, speedOut, easeOut, function() {
    if (opts.cssAfter) $l.css(opts.cssAfter);
    if (!opts.sync) fn();
});

おおよその行 860 - (コードを介していくつかのメモ/コメント/カスタマイズを追加したため、正確ではありません)。ここで、望ましい効果をもたらす .delay(800) を追加しました。

于 2011-03-11T12:27:03.997 に答える
0

待機する別の関数を呼び出すことはできませんか?

$('#slideshow').cycle({
before: onBefore,
after: onAfter
});

function onBefore(curr, next, opts){
   //Before changing slides do this
};

function onAfter(curr, next, opts){

//here, set your delay or a loop that continues until the slide is not animating,
//at which time it will proceed to fire the script you want

//The code below loops doing nothing if the element's animation is not complete.
//or else once the animation is complete it does something and stops the loop.
//This way jquery cycle's "after" event will call the onAfter function and get the variables, 
//for instance the current slide element (curr) or the current slide index (opts.currSlide) 
//from the after event and hold it until the animation is complete and the slide has changed.

  for(i=0; i>0 i++){
    if( $(elem).is(':animated') ) {
       //do nothing
    }
    else { 
       //do something now that animation is complete 
       break;
    }
  }
};

上記のコードはテストされていません。

上記の変数を取得しました。

現在のスライド要素「curr」と現在のスライドのインデックス「opts.currSlide」

jquery サイクル オプション リファレンス- http://jquery.malsup.com/cycle/options.htmlから、「console.log(opts)」を使用して、Google Chrome コンソールから opts の内部を確認します。

お役に立てれば。

于 2011-04-05T20:26:49.303 に答える