0

スライダーにjQueryCycleプラグインを使用しています-各スライド内にfadeInfadeOutエフェクトを作成する必要があります。
誰かがこれを経験したことがありますか？残念ながら、私はJavaScriptの作成にはまったく役に立たず、優れたサポートドキュメントを見つけることができませんでした。
これが例です
そして私の関数コードは以下の通りです。

$('#yslider ul').cycle({
           fx:     'fade',
           speed:   'slow',
           timeout: 1000,
           before: first,
           after:    second,
           pager:    '#number',
           pause: 1
        });
        function first(){
            $('.left').fadeOut(800).delay(100).animate({opactiy: 0.5 });
            $('.middle').delay(800).fadeOut(1300).animate({opactiy: 1.0 });
            $('.right').delay(2500).animate({right:'-1980px'}, 700);
        }
        function second(){
            $('.left').fadeIn(1000).delay(300).animate({opactiy: 1.5 });
            $('.middle').fadeIn(1500).delay(500).animate({opactiy: 2.5 });
            $('.right').delay(2500).animate({right: '-26px'}, 700);
        }
4

2 に答える 2

0

遷移コールバック関数に引数として渡され、次のようなことができるようになりcurrentSlideElementます。 nextSlideElement

function beforeCallback(currSlideElement, nextSlideElement) {
    //find something inside the current Element
    $(currSlideElement).find('.left').fadeIn();
    $(currSlideElement).find('.right').fadeIn();

    //find something inside the next Element
    $(nextSlideElement).find('.left').fadeOut();
    $(nextSlideElement).find('.right').fadeOut();
}

また

function afterCallback(currSlideElement, nextSlideElement) {
    $(currSlideElement).find('.left').fadeOut();
    $(currSlideElement).find('.right').fadeOut();

    $(nextSlideElement).find('.left').fadeIn();
    $(nextSlideElement).find('.right').fadeIn();
}

http://jquery.malsup.com/cycle/options.htmlを参照してください

于 2012-07-31T06:16:09.700 に答える
0

必要なのは、beforeを呼び出すことだけです。サイクルのオプション。onBeforeアニメーションを初期化し、遅延を入れてから、アニメーションを完成させます。すべてのスライディングタブに同じクラスを使用しているため、eq（）を使用して現在の「li」のみを実行します。

$(document).ready(function(){
    $('#yslider ul').cycle({
       fx:     'fade',
       speed:   'slow',
       timeout: 10000,
       before: pehla,
       pager:   '#number',
       pause: 1
    });
});
var sliderSize = $('#yslider ul li').size();
function pehla(){
    if(i == sliderSize)
        i = 0;
    $('.left:eq('+i+')').fadeIn(800, function(){
        $('.middle:eq('+i+')').fadeIn(1300, function(){
            $('.right:eq('+i+')').animate({right:'0px'}, 700, function(){
                $('.right:eq('+i+')').delay(4400).animate({right: '-1980px'}, 200, function(){
                    $('.middle:eq('+i+')').fadeOut(1300, function(){
                        $('.left:eq('+i+')').fadeOut(800);
                        i++;
                    });
                });
            });
        });
    });
}

また、CSSの一部を編集する必要があります

.left{left:0;display:none;}
.middle{ left: 13px;top: -75px;display:none;}
.right{right:-1980px;}

全体的なアニメーションの継続時間に応じてタイムアウトを設定します+ここで各スライドの遅延を設定します10000ミリ秒=アニメーションの開始（800 + 1300 + 700）+遅延（4400）+最終アニメーション（900 + 1300 + 800）

于 2012-07-31T08:04:06.063 に答える