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