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

Question

我正在构建一个依赖于 jQuery 效果的网站，但我对 jQuery Slide 效果有疑问。我目前通过 toggle 函数使用它，但稍后会改变。

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

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

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

编辑:问题更新和 fiddle

这是问题的更新，请参阅我原来更新的 fiddle 。当你在 jQuery UI 中执行滑动效果时，请看我的 fiddle 底部的例子，盒子被向上移动，并且被放置在一个看不见的屏幕后面的某个地方(很难解释)。

使用 animate 函数，请参阅我的 fiddle 中最上面的示例，区域缩小了，这是我想避免的事情。我想实现类似'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.
});

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

Answer 1

你可以像这样使用动画函数来做到这一点:

$('#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