逐渐降低不透明度，因为元素是通过jQuery UI .draggable(）拖动的

Make opacity less gradually as element is being dragged via jQuery UI .draggable()

本文关键字：UI jQuery draggable 拖动 不透明度 元素 因为      更新时间：2023-09-26

我有一个可以通过jQuery UI的.draggable()拖动的元素。如何在拖动元素时降低该元素的不透明度？

所以看起来它在被拖拽时正在淡出？

我也将还原设置为 true，我希望它恢复到完全不透明，如果还原开始并正在发生。

这是我的jQuery代码：

$('#draggable').draggable({
    axis: 'x',
    revert: true,
    drag:function(event, ui){
        if(ui.position.left>0){
            console.log("moving right");
            // fade out / make opacity less as drag moves right or ui.position.left becomes higher.
        }
    }
});

这是一个带有代码的JS小提琴：http://jsfiddle.net/EybmN/1/

我想知道并希望有人能帮助我弄清楚如何逐渐淡出/减少物体在被拖动时的不透明度。但是，如果发生还原并且项目开始滑回其原始位置，则将不透明度恢复为完全。

我将非常感谢任何和所有的帮助！

提前感谢！

像这样：

$('#draggable').draggable({
    axis: 'x',
    revert: true,
    drag:function(event, ui){
        ui.helper.css('opacity', 1-ui.position.left/ $(window).width());
    }
});

小提琴

编辑：

为了使可拖动元素在还原时也更改不透明度，我们必须挂钩到该事件中：

$('#draggable').draggable({
    axis: 'x',
    revert: function(valid) {
        if (!valid) {
            $(this).animate({opacity:1}, 'fast').animate(this.originalPosition);
            return true;
        }
        return false;
    },
    drag:function(event, ui){
        ui.helper.css('opacity', 1-ui.position.left/ $(window).width());
    }
});

小提琴

像这样的东西？

http://jsfiddle.net/EybmN/2/

$('#draggable').draggable({
    axis: 'x',
    revert: true,
    drag:function(event, ui){
        if(ui.position.left>0){
        console.log("moving right");
        $(this).css("opacity", (100-ui.position.left)/100);
        }
    }
});
相关文章：