jQuery UI Slide - 在动画期间移动内容

Question

我正在构建一个依赖 jQuery 效果的网站，但 jQuery 幻灯片效果存在问题。 我目前正在通过toggle 函数使用它，但这将在稍后阶段改变。

事实上，当某个动作被执行时，我正在阻止一个元素。当您使用slide 函数时，这些元素下方的内容会在动画完成时移动以占用由效果创建的空闲空间。

问题是内容只有在动画完成后才会移动。当动画仍在运行时，有什么方法可以移动内容。换句话说，我想将内容与动画一起移动，但我不想在应该随之移动的元素上调用slide 函数。

我创建了一个 JSFiddle 来演示这个问题：http://jsfiddle.net/6Lg9vL8m/6/

编辑：问题更新和小提琴

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

使用 animate 函数，请参阅我的小提琴中的顶部示例，该区域缩小了，这是我想要避免的事情。我想实现像'Slide'那样的效果，但是框下的内容必须随着动画立即向上移动，而不是在动画完成之后。

编辑：在插件中重新编写了正确答案。

感谢我在这里收到的答案，我找到了正确的代码，稍作修改，并从中创建了一个插件，我将把它放在这里。

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

这里是源代码：

(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.
});

如果有人有意见或者解决这个问题的更好方法，请在cmets中分享。

Answer 1

您可以使用这样的 animate 函数来做到这一点：

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

Demo

更新了代码以创建类似动画的“窗帘升起”：-

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

CSS：

`#square{
     overflow:hidden;
 }`

Demo 2

Answer 2

This是你想要的效果吗？

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