Javascript jQuery UI幻灯片-在动画期间移动内容

我正在建立一个依赖jQuery效果的网站，我对jQuery幻灯片效果有一个问题。 目前我正在通过

切换
功能来使用它，但在以后的阶段会有所改变

事实上，当某个动作被执行时，我正在阻止一个元素。当您使用功能
slide
时，动画完成后，这些元素下的内容将移动，以占用使用该效果创建的可用空间

问题在于，内容仅在动画完成后才会移动。当动画仍在运行时，是否有任何方法可以移动内容。换言之，我想将内容与动画一起移动，但我不想在我的元素上调用
slide
函数来移动它

我创建了一个JSFIDLE来演示这个问题：

编辑：问题更新和修改

这是问题的更新，请看我原来更新的小提琴。
当您在jQuery UI中执行幻灯片效果时，请参见我的小提琴上的底部示例，方框向上移动，并放置在一个不可见屏幕后面的某个位置（很难解释）

使用动画功能，请参见我的小提琴中的顶部示例，该区域缩小，这是我想要避免的。我想实现像“幻灯片”这样的效果，但框下的内容必须随着动画立即向上移动，而不是在动画完成后

编辑：在插件中修改正确答案。

多亏了我在这里收到的答案，我找到了正确的代码，进行了一些修改，并从中创建了一个插件，我将把它放在这里

该插件称为“窗帘”，可以描述为将请求的元素作为窗帘升起，从而将其移开

以下是源代码：

(function($) {
    $.fn.curtain = function(options, callback) {
        var settings = $.extend( {}, $.fn.curtain.defaults, options);
        var tabContentsHeight = $(this).height();

        $(this).animate({height:0}, settings.duration);
        $(this).children().animate({'margin-top':'-' + tabContentsHeight + 'px'}, settings.duration, function() {
            $(this).css({"margin-top":0});

            if ($.isFunction(callback)) {
                callback(this);
            }
        });

        return this; // Allows chaining.
    };

    $.fn.curtain.defaults = {
        duration: 250
    };
}(jQuery));

该插件可以这样调用：

element.curtain({ duration: 250 }, function() {
    // Callback function goes here.
});

$('#square').on('mousedown', function(e) {
    $(this).animate({height:-200},2500);
});

如果有人有意见或更好的方法来解决这个问题，请在意见中分享。
你想要的效果是什么

$('#square').on('click', function(e) {
     $(this).animate({height :0},2500 );
});

您可以通过如下方式使用动画功能完成此操作：

element.curtain({ duration: 250 }, function() {
    // Callback function goes here.
});

$('#square').on('mousedown', function(e) {
    $(this).animate({height:-200},2500);
});


更新代码以创建类似“帷幕升起”的动画：-

$('#square').on('mousedown', function(e) {
    $(this).animate({height:-200},2500);
    $(this).children().animate({"margin-top":"-400px"},2500, function() {
        $(this).css({"margin-top":0})
    });
});

CSS:

很抱歉，但在进一步调查之后。这不是我真正需要的。因为底部会消失直到到达顶部。我想反对搬出去。所以抓住底部并向上移动，直到它到达顶部。和幻灯片效果一样，明白了。您需要从下到上的动画。我将通过修改来更新我的代码。你能检查一下我更新的问题和提琴吗，这应该会让它更清楚。差不多，但你仍然可以看到jQuery UI幻灯片方法和你的实现之间的区别。我不想粗鲁，你做的很好，但我尝试为Web重新制作一个Windows应用程序，动画必须完全相同。您是否知道如何更新代码，使其与jQuery UI幻灯片功能完全相同？提前谢谢。嘿，看看这个。通过改变“边距顶部”的减少值，得到类似于向上滑动的值。为了合并函数行之间的延迟，我增加了页边顶部更改的速度。否则，我认为通过CSS3转换，我们可以得到类似jQueryUI幻灯片的东西。这不是我真正需要的。因为底部会消失直到到达顶部。我想反对搬出去。所以抓住底部并向上移动，直到它到达顶部。与幻灯片效果的作用相同。Sry，仍然不确定您到底想要什么。@您是否可以编辑您的问题以消除这种混淆，我不确定您所说的“我想反对搬出”是什么意思。谢谢你检查我的最新问题和提琴，这应该会使它更清楚。