0

シンプルなスライダーのフェードインとフェードアウト効果を与えるにはどうすればよいでしょうか。

シンプルなスライダーの実行 リンク : http://ivyfa.advisorproducts.com/home

使用したjsは以下です。

/*----------Slider---------------*/

$(function(){
    $('#slides').slides({
        preload: true,
        preloadImage: 'images/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true,
        animationStart: function(current){
            $('.caption').animate({
                left:0
            },100);
            if (window.console && console.log) {
                // example return of current slide number
                console.log('animationStart on slide: ', current);
            };
        },
        animationComplete: function(current){
            $('.caption').animate({
                bottom:0
            },200);
            if (window.console && console.log) {
                // example return of current slide number
                console.log('animationComplete on slide: ', current);
            };
        },
        slidesLoaded: function() {
            $('.caption').animate({
                bottom:0
            },200);
        }
    });
});

この jquery スライダーに加えて、フェードイン フェードアウトの機能を追加できますか?

ありがとうスシル

4

1 に答える 1

0

アニメーションの開始とアニメーションの停止の両方に不透明度を追加しましたが、機能します:)

以下は更新されたコードです。

$(function(){
    $('#slides').slides({
        preload: true,
        preloadImage: '/pages/images/loading.gif',
        play: 6000,
        pause: 3000,
        hoverPause: true,
        animationStart: function(current){
            $('.caption, .slide img').animate({
                left: 0,
                opacity: 0.5 //Added this opacity 
}, 100);
            if (window.console && console.log) {
                // example return of current slide number
                console.log('animationStart on slide: ', current);
            };
        },
        animationComplete: function(current){
            $('.caption, .slide img').animate({
                bottom:0,
                opacity: 1 //Added this opacity 
            },200);
            if (window.console && console.log) {
                // example return of current slide number
                console.log('animationComplete on slide: ', current);
            };
        },
        slidesLoaded: function() {
            $('.caption, .slide img').animate({
                bottom:0
            },200);
        }
    });
});
于 2012-07-24T13:03:40.497 に答える