使用Jquery更改拖动过程中元素的不透明度

Change opacity of an element during drag with Jquery

本文关键字：元素 不透明度 过程中 拖动 Jquery 使用      更新时间：2023-09-26

嗨，

我目前正在使用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：对不起我的法语：）

如果您的问题是如何处理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);
   });

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

相关文章：