Question

我正在构建一个依赖于jQuery效果的网站，我遇到了jQuery Slide效果的问题。我暂时通过toggle函数使用它，但这会在稍后阶段发生变化。

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

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

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

编辑：问题更新和提琴

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

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

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

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

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

这是源代码：

(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

你可以使用这样的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 );
});

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

2 个答案: