更改元素的不透明度與jQuery

我目前正在與RoyalSlider做了滑塊。在這個滑塊中，我有左右箭頭。所以，我的代碼，讓它變得更簡單，是類似的東西：

<div class="royalslider"> 
    <div class="slide">Slide Content</div> 
    <div class="slide">Slide Content</div> 
    <div class="slide">Slide Content</div> 
    <div class="arrowleft"></div> 
    <div class="arrowright"></div> 
</div>

的幻燈片通過拖動鼠標，也可以點擊箭頭進入下一個或前...

與API royalSlider的，我可以管理，事件是這樣的：

slider.ev.on('rsDragStart', function(event) { 
    // mouse/touch drag start 
}); 

slider.ev.on('rsDragRelease', function() { 
    // mouse/touch drag end 
});

我的問題是：

我想從1動畫我的箭的不透明度（我當我拖動我的幻燈片時，我的意思是關於幻燈片的位置。

如：

我開始拖着滑，不透明度開始淡出，我停止拖動，但不要鬆開我的幻燈片，不透明度停止褪色，我謹對方，不透明度淡入.. ..

是否有可能與jquery做這樣的事情？

希望我是清楚的： -/

非常感謝

PS：對不起，我frenglish :)

來源

2014-10-17 VaX

您需要現有代碼的JSFiddle，或者您嘗試使用不透明度的示例。這可能就像在每個動畫之前調用「stop」一樣簡單。 – 2014-10-17 09:31:58

如果你的問題是如何在jQuery中處理元素的不透明度，是的，你可以做得非常優雅。這裏是API鏈接，http://api.jquery.com/category/effects/fading/ 如果你想用小提琴演奏，在這兒，http://jsfiddle.net/80kqetf4/

現在回來到您的情況下，類似下面會有所幫助，

slider.ev.on('rsDragStart', function(event) { 
     // mouse/touch drag start 
     var visibility = <calculate visibility based on slider position>; // 0-min & 1-max 
     $('selector').fadeTo(1000, visibility); 
    }); 

    slider.ev.on('rsDragRelease', function() { 
     // mouse/touch drag end 
     var visibility = <calculate visibility based on slider position>; // 0-min & 1-max 
     $('selector').fadeTo(1000, visibility); 
    });

當然你可以進一步優化此代碼。

來源

2014-10-17 10:16:44

更改元素的不透明度與jQuery

回答

相關問題