jQuery插件easySlider 1.7 - 如何在easySlider中創建交叉漸變效果？

Question

jQuery插件easySlider 1.7 - 如何在easySlider中創建淡入淡出效果？

感謝

Answer 1

此插件僅用於滑動過渡，這樣做交叉淡入淡出需要修改插件（不明智），或尋找新的插件建。我最近討論了一種在this thread中可以通過手寫代碼jQuery實現交叉淡入淡出的方法。希望對你有幫助。

Answer 2

如果您使用的是easySlider1.7，那麼您可以輕鬆修改它。

Replace `marginTop: p` with ` opacity: 1` and `opacity: 0` at lines 133 and 169. 

然後，當垂直選項設置爲false時，滑塊將消失。或者您可以添加自己的選項，並在這些行上添加兩個句子，然後您可以在所有選項（垂直，水平，交叉淡入淡出）之間切換。

Answer 3

用這個插件代碼替換easyslider代碼。

http://bogojoker.com/easySlide/

（您可以通過鏈接「鏈接到js文件」菜單下「修改js文件」底部的代碼）。

然後按照網站上的示例創建您想要的淡入淡出效果。真的很容易。

Answer 4

尋找這一行

if(!options.vertical) { 
        p = (t*w*-1); 
        $("ul",obj).animate(
         { marginLeft: p }, 
         { queue:false, duration:speed, complete:adjust } 
        );    
       } 

，並改變它的

if(!options.vertical) { 
        p = (t*w*-1); 
        $("ul",obj).animate(
         { opacity: 0 }, 
         { queue:false, duration:'slow', complete:adjust } 
        ); 

       } 

然後尋找這一行

if(!options.vertical) { 
       $("ul",obj).css("margin-left",(t*w*-1)); 
      } 

，並改變它的

if(!options.vertical) { 
       $("ul",obj).css("margin-left",(t*w*-1)); 
       $("ul",obj).animate(
         { opacity: 1 }, 
         { queue:false, duration:'slow'} 
        ); 
      } 

我希望這可以幫到你