更改元素的不透明度与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

回答

相关问题