我們怎樣才能給一個簡單的滑塊淡入淡出效果？

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