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，我的意思是与幻灯片位置有关。

例如：

我开始拖动我的幻灯片，不透明度开始淡化，我停止拖动但不释放我的幻灯片，不透明度停止褪色，我移动另一边，不透明度淡入....

是否有可能使用jquery做这样的事情？

希望我很清楚： - /

非常感谢

PS：对不起我的frenglish：）

Answer 1

如果您的问题是关于如何在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);
   });

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

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

1 个答案: