通过 jQuery UI .draggable() 拖动元素时逐渐降低不透明度

Question

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

所以看起来它在被拖动时会淡出？

我也将 revert 设置为 true，并且我希望它在 revert 开始并且正在发生时恢复为完全不透明。

这是我的 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 Fiddle：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').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);
        }
    }
});