1

我有一个可通过 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 Fiddle：http: //jsfiddle.net/EybmN/1/

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

我将不胜感激任何和所有的帮助！

提前致谢！

4

2 回答 2

5

就像是 ：

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

小提琴

于 2013-09-15T19:22:24.057 回答
0

像这样的东西？

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);
        }
    }
});
于 2013-09-15T19:20:41.490 回答