如何将 jQuery 更改为在页面加载时触发

Question

好的，这看起来应该很简单，但我想不通。我有来自另一位开发人员的这段代码，我的任务是更改为在页面加载而不是滚动时触发。我已经尝试更改我能想到的所有内容（例如将.bind 更改为.load 和jQuery(this).bind('inview', function(event,visible) 更改为$(document).ready(function()），但没有任何效果。我该怎么做才能让这些数字仅在初始页面加载时进行动画处理？

    // Animate any number
    jQuery('.animateNumber').each(function(){

        var value = new Number;

        // Grab contents of element and turn it into a number
        value = jQuery(this).text();
        value = parseInt(value);

        // Set the starting text to 0
        jQuery(this).text('0');


        // Animate to correct value
        jQuery(this).bind('inview', function(event,visible) {
            if(visible == true) {
                jQuery(this).animateNumber(
                    {
                        number: value,

                    },
                    1000
                )
            }
        });

    });

更新

我已将代码更改为以下代码，它在 Firefox 中运行良好，但在 Chrome 中没有动画效果。有人知道为什么会这样吗？

// Animate any number
    jQuery('.animateNumber').each(function(){

        var value = new Number;

        // Grab contents of element and turn it into a number
        value = jQuery(this).text();
        value = parseInt(value);

        // Set the starting text to 0
        jQuery(this).text('0');


        // Animate to correct value

                jQuery(this).animateNumber(
                    {
                        number: value

                    },
                    1000
                );


                });

Answer 1

只需将其全部包装在准备好的文档中

$(document).ready(function() {
    //Your code
});

编辑：查看您的代码，看起来像：

jQuery(this).bind('inview', function(event,visible) {

每次使元素可见时都会触发，因此当您向下滚动和向后滚动时，该函数将再次运行...我建议删除它和它下面的 if 语句，使您的代码看起来不错像这样：

// Animate any number
jQuery('.animateNumber').each(function(){

    var value = new Number;

    // Grab contents of element and turn it into a number
    value = jQuery(this).text();
    value = parseInt(value);

    // Set the starting text to 0
    jQuery(this).text('0');


    // Animate to correct value
            jQuery(this).animateNumber(
                {
                    number: value,

                },
                1000
            );

如果它破坏了其他东西，你也可以创建一个全局变量来阻止它执行多次：

var numbersAnimate = true;
// Animate any number
jQuery('.animateNumber').each(function(){

    var value = new Number;

    // Grab contents of element and turn it into a number
    value = jQuery(this).text();
    value = parseInt(value);

    // Set the starting text to 0
    jQuery(this).text('0');


    // Animate to correct value
    jQuery(this).bind('inview', function(event,visible) {
        if(visible == true && numbersAnimate == true) {
            numbersAnimate = false;
            jQuery(this).animateNumber(
                {
                    number: value,

                },
                1000
            )
        }
    });

虽然，我不推荐它...也许最多作为临时修复