1

ボタンをクリックすると、一時的に画面下部の固定位置にdivスライドを作成しようとしています。ボタンを離したときの位置に戻したいのですが、うまく動かせません。私のコードは次のとおりです

$("#chatContainer").css("position", "fixed");
$("#chatContainer").animate({ top: '60%' }, 'slow');

位置が一時的に固定されているため、画面中央からDivがポップアップし、下にスライドします。下からスライドさせて、クリックが解除されるまでそこに貼り付けてほしい。

4

2 に答える 2

2

これが私がそれを試す方法です（頭のてっぺんから）：

  1. 問題のコンテナのウィンドウのx/y座標を取得します。
  2. $ .clone itを作成し、クローンのx / y座標を元の座標と同じに設定します（これにより、元の場所から移動しているように見えます）。
  3. 必要なアニメーションを実行します（オリジナルを非表示>クローンを新しい場所にアニメーション化>オリジナルを新しい位置に再表示>フェードアウト/クローンを削除）

クローンは「表示用」であるため、クローンの不要なバインドなどを回避するために、いくつかの調整が必要になる場合があります。

これが技術的に「最良の」方法であるかどうかはわかりませんが、目的のユーザーエクスペリエンスを得るために私が取ろうとするアプローチです。

于 2012-06-27T13:35:50.930 に答える
1

このコードは、スライドdivがコンテナ内にあることを前提としていますが、ブラウザウィンドウを参照として使用するように簡単に調整できる必要があります。

var speed = .5; // higher number = faster animation
var originalPosition = null;

$('#container').mousedown(function(){
    var $slider = $('#slider');
    var start = $slider.position().top;
    if(!originalPosition) {
        originalPosition = {top: start};
    }
    var end = $(this).height() - $slider.height();
    var duration = (2/speed) * (end - start);
    $slider.css({
        position: 'absolute',
        top: start+'px',
    }).stop().animate({
        top: end+'px'
    },duration);
}).mouseup(function(){
    var $slider = $('#slider');
    $slider.stop();
    var start = $slider.position().top;
    var end = originalPosition.top;
    var duration = (2/speed) * (start - end);
    $slider.animate({
        top: end+'px'
    },duration,function(){
        $(this).css({position: 'static'});
    });
});

次に例を示します。jsFiddle：DEMO

divこのソリューションには、スライドする必要がある距離に基づいてアニメーションの長さを調整できるという利点があります。このように、アニメーションの「速度」は一定です。

于 2012-06-27T13:54:17.277 に答える