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
            )
        }
    });

虽然，我不推荐它......也许最多只能暂时修复

如何将jQuery更改为Fire on Page Load

1 个答案: