javascript - How can we give a simple slider fadein and fadeout effect?

Question

How can we give a simple slider fadein and fadeout effect.

Running simple slider Link : http://ivyfa.advisorproducts.com/home

Below is the js used:

/*----------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);
        }
    });
});

Can we add some extra functionality of fadein fadeout along with this jquery slider?

Thanks Sushil

Answer 1

我已经为开始动画和停止动画添加了不透明度，它可以工作:)

以下是更新后的代码：

$(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);
        }
    });
});