javascript - 如何在事件中使 div 滑动到窗口底部

Question

当我单击一个按钮时，我正在尝试将 div 临时滑动到屏幕底部的 FIXED 位置。我希望它滑回按钮释放时的位置，但我无法让它工作。我的代码如下

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

因为位置是临时固定的，所以Div从屏幕中间弹出，然后向下滑动。我希望它从底部滑动并粘在那里直到释放咔嗒声。

Answer 1

这是我尝试的方式（在我的脑海中）：

1. 获取相关容器的窗口 x/y 坐标。
2. $.clone 它，然后将克隆的 x/y 坐标设置为与原始位置相同（这样它似乎正在从原始位置移动）。
3. 执行必要的动画（隐藏原始>动画克隆到新位置>在新位置重新显示原始>淡出/删除克隆）

您可能需要进行一些调整以避免克隆上不必要的绑定等，因为克隆“只是为了展示”。

我不确定这是技术上的“最佳”方式，但我会尝试采用这种方式来获得所需的用户体验。

Answer 2

此代码假定您的滑动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需要滑动的距离来调整动画的持续时间。这样，动画的“速度”是恒定的。