Question

当我点击按钮时，我试图暂时将div滑动到屏幕底部的FIXED位置。我希望它能够滑回按钮释放的位置，但我无法让它工作。我的代码如下

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

由于位置暂时固定，因此Div会从屏幕中间弹出，然后向下滑动。我希望它从底部滑动并粘在那里直到释放点击。

Answer 1

这是我尝试它的方式（在我的头顶）：

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

您可能需要进行一些调整以避免对克隆进行不必要的绑定等，因为克隆是“仅用于显示”。

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

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需要滑动的距离来调整动画的持续时间。这样，动画的“速度”就不变了。

如何在事件中将div滑动到窗口底部

2 个答案: