延迟到 jQuery 动画完成

Posted

技术标签:

【中文标题】延迟到 jQuery 动画完成【英文标题】:Delay until jQuery animate has finished 【发布时间】:2012-08-01 19:51:26 【问题描述】:

我制作了一个 jQuery 插件,它可以制作启动画面。它使用 jQuery 的 animate 函数,并通过以下方式初始化和触发:

    $('#temperature_splash').splashScreen();

    $('.tempGraphButton').click(function () 

        $('#temperature_splash').splashScreen('splash', 300);

         //Here, I would like to make an ajax request when the animation has finished
    

我想在插件中的动画完成后发出一个 ajax 请求,但我不知道怎么做。有人有什么建议吗?

插件代码概要

$.fn.splashScreen = function (method) 
    // Method calling logic
    if (methods[method]) 
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
     else if (typeof method === 'object' || !method) 
        return methods.init.apply(this, arguments);
     else 
        $.error('Method ' + method + ' does not exist');
    


var methods = 
    init: function () 
        //Some initializations
    ,

    splash: function (time) 
        //Setting some properties

        splashScreenContent.animate(
            width: width,
            left: leftPos
        , time).animate(
            height: height,
            top: topPos
        , time);

        return false;
    


)(jQuery);

【问题讨论】:

【参考方案1】:

只需添加一个回调

var methods = 
    init: function () 
        methods.splash(1000, function() 
            //do something when animation is finished
            methods.ajax();
        );
    ,
    splash: function (time, callback) 
        splashScreenContent.animate(
            width: width,
            left: leftPos
        , time).animate(
            height: height,
            top: topPos
        , time, function() 
            if (typeof callback==='function') callback.call();
        );

        return false;
    ,
    ajax: function() 
        //do ajax stuff
    

这只是一个示例,您必须自己弄清楚要传递哪些选项以及如何将其绑定到您的插件中。

【讨论】:

【参考方案2】:

你不能也绑定到 jQuery 中的 .done 特性吗?

methods.done(function() do your code here for the ajax )'

【讨论】:

自制插件不一定可以访问 Promise,除非您将其添加到插件中。【参考方案3】:

由于这些调用是异步的,您可以将 ajax 代码放在关闭启动代码之前,因为启动函数之后的代码将在启动函数内部的代码之前执行

【讨论】:

以上是关于延迟到 jQuery 动画完成的主要内容,如果未能解决你的问题,请参考以下文章

jquery动画延迟

在Vue中使用GSAP完成动画(一)

jQuery动画延迟问题与自排队循环的步骤

如何延迟 onClick 图像链接,以便 .gif 动画可以在页面切换之前完成?

jQuery图片水平滑动延迟加载动画

深入学习jQuery动画控制