使用Jquery拖动期间更改元素的不透明度

Question

嗨，您好，

我目前正在使用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>

可以用鼠标拖动幻灯片，也可以单击箭头转到下一个或上一个...

使用royalSlider的API，我可以管理如下事件：

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

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

我的问题是：

当我拖动幻灯片时，我想使箭头的不透明度从1（初始状态）变为0，我的意思是相对于幻灯片位置。

例如：

我开始拖动幻灯片，不透明度开始逐渐淡出，我停止拖动但不释放幻灯片，不透明度停止褪色，我移动另一侧，不透明度fadeIn ....

jquery是否可以做这样的事情？

希望我清楚：-/

非常感谢

PS：对不起，我的脆弱:)

Answer 1

如果您的问题是关于如何处理jquery中元素的不透明度，是的，您可以非常优雅地完成它。 这里是API链接， http: //api.jquery.com/category/effects/fading/如果您想和Fiddle一起玩，这里是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);
   });

当然，您可以进一步优化此代码。