Question

我希望运行一个在浏览器视图中运行的计数脚本，就像在chicagolawyer.com的视频播放器模块上一样。据我所知，他们使用jquery.appear.js（Link）完成了这个，我找到了一个可以在网站上工作的计数脚本（link）正在设计，但尚无法确定如何实现浏览器视图延迟脚本。这是我在Joomla模块上输入的代码：

<h1 id="casesWon"></h1>
<script type="text/javascript">
var options = {
    useEasing : true,
    useGrouping : true,
    separator : ',',
    decimal : '.',
    prefix : '',
    suffix : '% Cases Won'
};
var count1 = new CountUp("casesWon", 0, 98, 0, 10, options);
$('casesWon').on('appear', count1.start());
</script>

如果我将最后一行切换到count1.start（）;所以我只想弄清楚我在jquery.appear.js做错了什么。对于Javascript我是新手，所以我确信这是一个我想念的简单。为jquery脚本提供的文档似乎含糊不清，但对于比我更了解jquery的人来说可能已经足够了。请帮忙。

Answer 1

经过大量的阅读和实验，我终于找到了如何让这两个脚本协同工作。不是将直接代码输入到模块中，而是创建了第三个脚本。脚本如下：

jQuery(function($) {
    var $casesWon = $('#casesWon');

    var optionsCases = {
        useEasing : true,
        useGrouping : true,
        separator : ',',
        decimal : '.',
        prefix : '',
        suffix : '% Cases Won'
    };

    var countCases = new CountUp("casesWon", 0, 98, 0, 10, optionsCases);

    $('#casesWon').appear();

    $(document.body).on('appear', function(e, $affected) {
        // this code is executed for each appeared element

        console.log( $affected );
        $affected.each(function() {         
            countCases.start();
        });
    });

});

当我这样做时，count up脚本会一直等到一个带有id＆＃34; casesWon＆＃34;的元素。在浏览器视图中，然后开始计数。感谢@monxas和@KevinB试图提供帮助。投票反对这个问题的人可以搞砸，因为我在自己研究其他网站如何做之前在stackoverflow上寻找答案。希望这会帮助其他人。

Answer 2

确保您正在使用

$('#casesWon').on('appear', count1.start());

而不是

$('casesWon').on('appear', count1.start());

也许这里只是一个错字，可能是代码错字！ ;）

编辑：另外，您可能需要像这样使用它：

$('#casesWon').on('appear', count1.start);

防止在加载时执行

如何延迟javascript运行直到浏览器视图内部？

2 个答案: