当 div 可见时激活 JavaScript 代码

Question

感谢您的建议，我已经更新了我的要求。

我有下一个代码：

https://jsfiddle.net/btq7mm0h/3/

是文档准备就绪时启动的简单计数器。我希望当div id="testimonios" 在屏幕上可见时它会开始，因为当我向下滚动以查看效果时已经看不到了。

我

做了什么，我找到了几个插件js，比如

https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery

在我的文档中添加脚本并修改代码：

if $('#testimonios').visible( true ) {
   $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 9000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}

请提出任何建议。

Answer 1

有几种方法可以解决这个问题，例如使用计时器，纯JavaScript和jquery有一些变体。这是解决这个问题的一种方法。

 $("#testimonios").bind("DOMSubtreeModified", function() {
   // do whatever here, you can even add an if statement for css such as
   var cssCheck = $(this).css('display');
   if (cssCheck == "block") {
    // Div Display is Visible
    alert("isVisible");
   } else {
    // Div Display is not Visible
    alert("isNotVisible");
   }
 });

您可以在 codebin： http://codebins.com/bin/4ldqoyk 上看到结果