Question

我们如何才能提供简单的滑块渐变和淡出效果。

运行简单滑块链接：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);
        }
    });
});

我们可以添加一些额外的fadein fadeout功能以及这个jquery滑块吗？

由于苏希尔

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

我们怎样才能给出简单的滑块淡化和淡出效果？

1 个答案: