1

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/

私は疑問に思っており、ドラッグされているオブジェクトの不透明度を徐々にフェードアウト/不透明にする方法を誰かが理解するのを手伝ってくれることを願っています。ただし、元に戻すが発生し、アイテムが元の場所に戻り始めた場合は、不透明度を完全に戻します。

あらゆる助けをいただければ幸いです。

前もって感謝します！

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 に答える