如何在WordPress子主题JS中禁用计数器盒子的jQuery动画？

现有一个WordPress网站，所有修改均在子主题中进行。网站部分页面包含计数器盒子，元素进入视口时数字会从0计数到设定值，其HTML结构如下：

<div class="fusion-column-wrapper">
    <div class="fusion-counters-box counters-box fusion-columns-4">
        <div class="fusion-counter-box fusion-column col-counter-box counter-box-wrapper" data-animationoffset="100%">
            <div class="counter-box-container">
                <div class="content-box-percentage content-box-counter">
                    <i class="counter-box-icon fontawesome-icon fa fa-suitcase" aria-hidden="true"></i>
                    <span class="display-counter" data-value="87342" data-direction="up" data-decimals="0">87342</span>
                </div>
                <div class="counter-box-content">PLAQUES POSEES</div>
            </div>
        </div>

        <!-- other columns -->

    </div>
</div>

需求是禁用所有计数器盒子的动画效果，直接显示最终数值。

运行动画的JS脚本位于主题配套插件fusion-builder的fusion-counters-box.js中，核心代码如下：

!function (o) { "use strict"; o.fn.$fusionBoxCounting = function () { var n = o(this).data("value"), e = o(this).data("direction"), i = o(this).data("delimiter"), t = 0, u = n, r = fusionCountersBox.counter_box_speed, s = Math.round(fusionCountersBox.counter_box_speed / 100); i || (i = ""), "down" === e && (t = n, u = 0), o(this).countTo({ from: t, to: u, refreshInterval: s, speed: r, formatter: function (o, n) { return "-0" === (o = (o = o.toFixed(n.decimals)).replace(/\B(?=(\d{3})+(?!\d))/g, i)) && (o = 0), o } }) } }(jQuery), jQuery(window).on("load fusion-element-render-fusion-counters_box", function (o, n) { (void 0 !== n ? jQuery('div[data-cid="' + n + '"]').find(".fusion-counter-box").not(".fusion-modal .fusion-counter-box") : jQuery(".fusion-counter-box").not(".fusion-modal .fusion-counter-box")).each(function () { var o = jQuery(this), n = getWaypointOffset(jQuery(this)); o.waypoint(function () { o.find(".display-counter").each(function (o, n) { jQuery(n).$fusionBoxCounting() }), this.destroy() }, { offset: n }) }), jQuery(".fusion-modal .fusion-counter-box").on("appear", function () { jQuery(this).find(".display-counter").each(function () { jQuery(this).$fusionBoxCounting() }) }) }), jQuery(window).on("fusion-element-render-fusion_counter_box", function (o, n) { jQuery('div[data-cid="' + n + '"]').find(".display-counter").each(function () { jQuery(this).$fusionBoxCounting() }) });

直接修改插件文件会在插件更新后丢失改动，尝试在子主题JS文件中添加以下代码但无效：

(function($){

    $(document).ready(function(){

        /** 
         * Disable Animation
         */

        $(".display-counter").on( "appear", function(){

            jQuery.fx.off = true; // right now it doesn't give any effect

        });

    });

})(jQuery);

请问该需求是否可行？若可行，正确的实现方式是什么？

这个需求完全可行，以下是几种在子主题JS中实现的可靠方法，均不会受插件更新影响：

方法1：重写$fusionBoxCounting方法（推荐） #

直接覆盖原插件定义的$fusionBoxCounting方法，让它直接显示最终数值，不执行动画：

(function($) {
    $(window).on('load', function() {
        // 重写计数方法，直接设置为目标值
        $.fn.$fusionBoxCounting = function() {
            $(this).text($(this).data('value'));
        };
    });
})(jQuery);

原理：原插件的动画逻辑完全依赖这个自定义方法，重写后所有调用该方法的地方都会直接显示最终数值，无需修改其他逻辑。

方法2：阻止Waypoint触发动画 #

原插件通过Waypoint监听元素是否进入视口，触发动画。可以移除Waypoint或者阻止其回调执行：

(function($) {
    $(window).on('load fusion-element-render-fusion-counters_box', function(event, cid) {
        var $counters = cid ? 
            $('div[data-cid="' + cid + '"]').find('.fusion-counter-box').not('.fusion-modal .fusion-counter-box') :
            $('.fusion-counter-box').not('.fusion-modal .fusion-counter-box');
        
        // 移除已绑定的waypoint
        $counters.each(function() {
            $(this).waypoint('destroy');
            // 直接设置最终数值
            $(this).find('.display-counter').text($(this).find('.display-counter').data('value'));
        });

        // 处理模态框内的计数器
        $('.fusion-modal .fusion-counter-box').off('appear').on('appear', function() {
            $(this).find('.display-counter').text($(this).find('.display-counter').data('value'));
        });
    });

    // 处理动态渲染的计数器
    $(window).off('fusion-element-render-fusion_counter_box').on('fusion-element-render-fusion_counter_box', function(event, cid) {
        $('div[data-cid="' + cid + '"]').find('.display-counter').each(function() {
            $(this).text($(this).data('value'));
        });
    });
})(jQuery);

原理：先销毁原插件绑定的Waypoint，避免触发动画，同时直接设置计数器的文本为目标值；另外覆盖动态渲染事件的处理逻辑，确保动态加载的计数器也无动画。

方法3：直接替换计数器文本（简单粗暴） #

如果不需要考虑动态渲染的计数器，也可以在页面加载后直接替换所有计数器的文本：

(function($) {
    $(window).on('load', function() {
        $('.display-counter').each(function() {
            $(this).text($(this).data('value'));
        });
    });

    // 处理动态加载的计数器
    $(document).on('fusion-element-render-fusion-counters_box fusion-element-render-fusion_counter_box', function(event, cid) {
        var $targets = cid ? $('div[data-cid="' + cid + '"]').find('.display-counter') : $('.display-counter');
        $targets.each(function() {
            $(this).text($(this).data('value'));
        });
    });
})(jQuery);

原理：不管动画是否触发，直接把计数器的文本设置为data-value里的最终值，即使动画启动也会被立刻覆盖。

注意事项 #

• 确保子主题的JS文件在插件的fusion-counters-box.js之后加载（WordPress中默认子主题脚本优先级低于插件，若有问题可通过wp_enqueue_script的$deps参数指定依赖fusion-counters-box）。
• 测试时清空缓存，避免旧脚本影响结果。

内容的提问来源于stack exchange，提问作者Denis BISTEINOV