我们怎样才能给一个简单的滑块淡入淡出效果？

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

我们可以添加与这个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); 
     } 
    }); 
});