當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