如何在移动内容而不是仅仅显示内容的同时将 div 动画/滑动到视图中？答案

【问题标题】：How can I animate/slide a div into view while moving the contents as opposed to just revealing the contents?如何在移动内容而不是仅仅显示内容的同时将 div 动画/滑动到视图中？
【发布时间】：2014-11-19 14:23:18
【问题描述】：

我想使用 jquery 的 slideUp 和 slideDown 方法，但不是仅仅显示内容之一，就像来回拉动屏幕一样，我希望内容本身滑入视图，就像一个隐藏的面板被来回拉动一样。

【问题讨论】：

欢迎来到 StackOverflow！ 请参阅 "Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”。
你的意思是这样的：jsfiddle.net/abhitalks/okgzus7v ?
@JonCrowell：然后只需移除不透明度并增加偏移量。像这样：jsfiddle.net/abhitalks/okgzus7v/1
@JonCrowell：另外，请理解您必须首先确定您的用例，因为有几种方法可以做到这一点，并且它们都根据需要而有所不同。你可以为margin设置动画，你可以定位它absolute和为top/left设置动画等等。
见这里：jsfiddle.net/abhitalks/okgzus7v/5。但是，正如我所说，您必须非常清楚您的用例。请通过为您的布局和用例创建一个可重复的小示例来改进问题。没有它，你不可能得到好的答案，而且问题迟早会被关闭。

标签： javascript jquery jquery-animate

【解决方案1】：

如果你想使用 jQuery 动画，请检查这个小提琴：http://jsfiddle.net/cgLy77us/1/

脚本：

$(document).ready(function(){

var SlideUpAnimate = function(duration, callback){
    var $element = $("#slideUp");
    var startPosition = $(window).scrollTop() + $(window).height() + $element.height();
    var finishPosition = $element.position().top;
    $element.css("top", startPosition + "px").show().animate({
        top:  finishPosition + "px"
    },duration, callback);
};

var SlideDownAnimate = function(duration, callback){
    var $element = $("#slideUp");
    var finishPosition = $(window).scrollTop() + $(window).height() + $element.height();
    var startPosition = $element.position().top;
    $element.css("top", startPosition + "px").animate({
        top:  finishPosition + "px"
    },duration, function(){
        $element.hide();
        callback();
    });
};

SlideUpAnimate(1000,function(){
    //Some callback code here like:
    SlideDownAnimate(1000);
});

});

我认为你可以适应每一种情况。

【讨论】：