如果在 animate() 之后设置 hide() jquery animate 函数，它不起作用？

发布于 2024-10-09 14:44:10 字数 647 浏览 8 评论 0原文

首先我有一个 id 为“test”的 iframe 动画

<iframe id="test" src=""></iframe>

，然后我想要对其进行动画处理并隐藏它，像在 MacOS 中一样制作关闭效果：

$('#test').animate({
                'width':0,
                'height':0,
                'top':$('input').offset().top,
                'left':$('input').offset().left
            },function(){
                //$(this).hide();        
            }).hide();

但似乎 iframe 无法隐藏。但是，如果我将其写入回调函数中在 animate 中，这是上面带注释的代码。它可以再次工作。

这是在线案例

所以我想知道为什么 animate() 之后的 hide() 不起作用？我错过了什么吗？

原文

First I have a animate a iframe which id is "test"

<iframe id="test" src=""></iframe>

then I want animate it and hide it ,make a close effect like in MacOS:

$('#test').animate({
                'width':0,
                'height':0,
                'top':$('input').offset().top,
                'left':$('input').offset().left
            },function(){
                //$(this).hide();        
            }).hide();

but it seems the iframe can not be hide.However,if I write it in the callback function that in animate,which is the annotated code above.It could work again.

Here is online case

So I wonder why the hide() after animate() doesn't work?Do I miss something ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

牵你手 2024-10-16 14:44:10

为了回答您的问题，对 .hide() 的调用是在调用 .animate() 之后立即执行的，因此 .hide() 调用实际上发生在动画完成之前，（.animate() 异步运行） - 这就是 jQuery 为您提供回调函数的原因这样您就可以在动画完成时收到通知。

$('#test').animate({
            'width':0,
            'height':0,
            'top':$('input').offset().top,
            'left':$('input').offset().left
        }, function(){
             $("#test").hide();
        });

也在 jsFiddle 上为您保存了此内容

To answer your question, the call to .hide() is performed immediately after the call to .animate(), so the .hide() invocation actually takes place before the animation completes, (.animate() runs asynchronously) - this is why jQuery provides the callback function to you so you can be notified of when the animation completes.

$('#test').animate({
            'width':0,
            'height':0,
            'top':$('input').offset().top,
            'left':$('input').offset().left
        }, function(){
             $("#test").hide();
        });

Saved this for you on jsFiddle too

回复收藏 0 原文

思念满溢 2024-10-16 14:44:10

将 opacity 设置为 hide 即可工作：

$('#mask').click(function () {            
    $('#mask').fadeOut(500);
    $('#test').animate({
        opacity: 'hide',
        'top':$('input').offset().top,
        'left':$('input').offset().left,
    },3000);

});

Set opacity to hide and it will work:

$('#mask').click(function () {            
    $('#mask').fadeOut(500);
    $('#test').animate({
        opacity: 'hide',
        'top':$('input').offset().top,
        'left':$('input').offset().left,
    },3000);

});

回复收藏 0 原文

~没有更多了~