0

ここdivに、クリックするとアニメーション化されて幅が拡大されるa の例があります。クリックではなくドラッグでこれを達成できる方法はありますか?

私が本当に欲しいのは、ユーザーが 100 ピクセルの幅から 75 ピクセルまでドラッグすると、iOS の通知バーのようにドラッグ アニメーションをオートコンプリートする、ドラッグ可能なアイテムです。

現在のjQuery:

$('.handle').toggle(
    function() { $('.bar').animate({right: 0, opacity: 1.0}, { duration: 0, queue: false }); }, 
    function() { $('.bar').animate({right: -165, opacity: 0.6}, { duration: 0, queue: false }); }
);

$('.handle').toggle(
    function() { $('.handle').animate({right: 200, opacity: 1.0}, { duration: 0, queue: false }); }, 
    function() { $('.handle').animate({right: 35, opacity: 0.6}, { duration: 0, queue: false }); }
);​
4

2 に答える 2

0

これを実現するには、JQueryUI またはその他の同様のプラグインが必要です。これで、 $('.handle').draggable(); を使用してバーをドラッグ可能にすることができます。

他のプラグインを使用したくない場合は、これに興味があるかもしれません:

jquery-ui を使用しないドラッグ可能な div

于 2012-12-06T14:38:55.637 に答える
0

あなたの jsfiddle の例は私にはやや曖昧ですが、どちらもあなたの目標ですが、私が理解したことは、あなたがこのようなものを望んでいることですよね? これは、実際にはUIに依存するやや微調整であり、コードによっては非常にバグが発生する可能性もあります.

http://jsfiddle.net/3Tn2F/

var bar = $(".bar");
bar.draggable({
    start:function(){
    }
}).mouseup(function(){
    $(this).animate({left:300, opacity: 0.6}, { duration: 1000, queue: false });
});
$(".handle").droppable({
    over: function( event, ui ) {
        bar.trigger( 'mouseup' );

    }
});

上記のコードは、私が提供した jsfiddle の例に基づいていますが、ケースに合わせてカスタマイズできます。

ブラジル

于 2012-12-06T16:24:50.573 に答える