Question

我有一个可以通过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/

我很想知道并希望有人可以帮我弄清楚如何逐渐淡出/使不透明度被拖动的对象被拖动。但是如果发生了恢复并且项目开始滑回原来的位置，则将不透明度恢复为完全。

我非常感谢任何帮助！

提前致谢！

Answer 1

类似的东西：

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

FIDDLE

修改

要使draggable元素在revert上改变不透明度，我们必须挂钩该事件：

$('#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()); } });

FIDDLE

Answer 2

这样的东西？

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);
        }
    }
});

在通过jQuery UI拖动元素时，不要逐渐增加不透明度.draggable（）

2 个答案: