Run Function only when div appears

Question

Hello guys I have an accountant and I wanted it to start when the div #time starts to appear on the screen

<script type="text/javascript">
        $(document).ready(function (){
            $('.spincrement').spincrement({
                from: 0.0,
                decimalPlaces:0 ,
                duration: 5000,
            });
        });
    </script>

JS DO PLUGIM

/**
 * jQuery Spincrement plugin
 *
 * Plugin structure based on: http://blog.jeremymartin.name/2008/02/building-your-first-jquery-plugin-that.html
 * Leveraging of jQuery animate() based on: http://www.bennadel.com/blog/2007-Using-jQuery-s-animate-Method-To-Power-Easing-Based-Iteration.htm
 * Easing function from jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
 * Thousands separator code: http://www.webmasterworld.com/forum91/8.htm
 *
 * @author John J. Camilleri
 * @version 1.2
 */

/* global jQuery */

(function ($) {
  // Custom easing function
  $.extend($.easing, {
    // This is ripped directly from the jQuery easing plugin (easeOutExpo), from: http://gsgd.co.uk/sandbox/jquery/easing/
    spincrementEasing: function (x, t, b, c, d) {
      return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
    }
  })

  // Spincrement function
  $.fn.spincrement = function (opts) {
    // Default values
    var defaults = {
      from: 0,
      to: null,
      decimalPlaces: null,
      decimalPoint: '.',
      duration: 1000, // ms; TOTAL length animation
      leeway: 50, // percent of duraion
      easing: 'spincrementEasing',
      fade: true,
      complete: null
    }
    var options = $.extend(defaults, opts)

    // Function for formatting number
    var re_thouSep = new RegExp(/^(-?[0-9]+)([0-9]{3})/)
    function format (num, dp) {
      num = num.toFixed(dp) // converts to string!

      // Non "." decimal point
      if ((dp > 0) && (options.decimalPoint !== '.')) {
        num = num.replace('.', options.decimalPoint)
      }

      // Thousands separator
      if (options.thousandSeparator) {
        while (re_thouSep.test(num)) {
          num = num.replace(re_thouSep, '$1' + options.thousandSeparator + '$2')
        }
      }
      return num
    }

    // Apply to each matching item
    return this.each(function () {
      // Get handle on current obj
      var obj = $(this)

      // Set params FOR THIS ELEM
      var from = options.from
      if (obj.attr('data-from')) {
        from = parseFloat(obj.attr('data-from'))
      }

      var to
      if (obj.attr('data-to')) {
        to = parseFloat(obj.attr('data-to'))
      } else if (options.to !== null) {
        to = options.to
      } else {
        var re = new RegExp(options.thousandSeparator, 'g')
        to = parseFloat(obj.text().replace(re, ''))
      }

      var duration = options.duration
      if (options.leeway) {
        // If leeway is set, randomise duration a little
        duration += Math.round(options.duration * ((Math.random() * 2) - 1) * options.leeway / 100)
      }

      var dp
      if (obj.attr('data-dp')) {
        dp = parseInt(obj.attr('data-dp'), 10)
      } else if (options.decimalPlaces !== null) {
        dp = options.decimalPlaces
      } else {
        var ix = obj.text().indexOf(options.decimalPoint)
        dp = (ix > -1) ? obj.text().length - (ix + 1) : 0
      }

      // Start
      obj.css('counter', from)
      if (options.fade) obj.css('opacity', 0)
      obj.animate(
        {
          counter: to,
          opacity: 1
        },
        {
          easing: options.easing,
          duration: duration,

          // Invoke the callback for each step.
          step: function (progress) {
            obj.html(format(progress * to, dp))
          },
          complete: function () {
            // Cleanup
            obj.css('counter', null)
            obj.html(format(to, dp))

            // user's callback
            if (options.complete) {
              options.complete(obj)
            }
          }
        }
      )
    })
  }
})(jQuery)

MY DIV:

    <div id="horario">
        <div id="img-horario">
            <div class="wrap4">
                <ul>
                    <li class="liH2" style="margin-right: 145px;">
                         <img src="images/hora/02.png">
                        <h1 class="spincrement">1454</h1>
                        <h2 style="margin-left: 13px;">HORAS TRABALHADAS</h2>
                    </li>
                    <li class="liH2" style="margin-right: 145px;margin-top: 14px;">
                         <img src="images/hora/03.png">
                        <h1 class="spincrement">489463</h1>
                        <h2 style="margin-left: 8px;">PROJETOS FINALIZADOS</h2></li>
                    <li class="liH2" style="margin-right: 145px;margin-top: 21px;">
                          <img src="images/hora/01.png">
                        <h1 class="spincrement">56464</h1>
                        <h2 style="margin-left: 12px;">METROS DE IMPRESSÃO</h2></li>
                    <li class="liH2" style="margin-top: -3px;">
                        <img src="images/hora/04.png">
                        <h1 class="spincrement">18500</h1>
                        <h2 style="margin-left: 30px;">XÍCARAS DE CAFÉ</h2></li>
                </ul></div></div></div>

Answer 1

Call the jQuery.ready of your div and not of the document.

$("#divHorario").ready(function (){
  $('.spincrement').spincrement({
    from: 0.0,
    decimalPlaces:0 ,
    duration: 5000,
  });
});

Using the jQuery.show()

$("#divHorario").show(function (){
  $('.spincrement').spincrement({
    from: 0.0,
    decimalPlaces:0 ,
    duration: 5000,
  });
});

By default leave your div hide and at the moment you want to show it use the show and pass as parameter in the function the behavior you want.

Answer 2

I think it works

 $('.spincrement').spincrement({
          from: 0.0,
          decimalPlaces:0 ,
          duration: 5000,
          complete: function (e) {
             alert('Faz algo ao aparecer a DIV')
          }
 });