当div获得类\ AnimatedNumber()时调用函数

Question

我想知道如何创建一个函数，这个函数一旦一个div获得一个类就会启动。我有一个div，当滚动时出现(它是一个动画)。一旦出现，它就会得到一个名为"in-view"的类。

其思想是每次div获得类"in-view"时调用一个函数。

这就是我说的那个

当div .numbers获得类"in-view"时，应该调用.

Jquery

​

$(document).ready(function() {
			$('.numbers.in-view .count-text').each(function () {
  				var $this = $(this);
				$({ Counter: 0 }).animate({ Counter: $this.text() }, {
				    duration: 4000,
				    easing: 'swing',
				    step: function () {
				      $this.text(Math.ceil(this.Counter));
				    }
				});
			});
		});


**html**

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-1 numbers animation-element slide-left testimonial">
	<div class="fact-counter">
		<div class="row clearfix">
			<div class="counter-outer clearfix">
				<article class="column col-sm-1">
					<div class="count-icon"><i class="awesome fa-cogs"></i></div>
					<div class="count-outer"><span class="count-text count-1">15</span></div>
					<h4 class="counter-title">LOREM IPSUM DOLOR</h4>
				</article>
				<article class="column col-sm-1">
					<div class="count-icon"><i class="awesome fa-heart-o"></i></div>
					<div class="count-outer">+<span class="count-text count-2">5000</span></div>
					<h4 class="counter-title">LOREM IPSUM DOLOR</h4>
				</article>
				<article class="column col-sm-1">
					<div class="count-icon"><i class="awesome fa-globe-o"></i></div>
					<div class="count-outer"><span class="count-text count-3">482</span></div>
					<h4 class="counter-title">LOREM IPSUM DOLOR</h4>
				</article>
				<article class="column col-sm-1">
					<div class="count-icon"><i class="awesome fa-globe-o"></i></div>
					<div class="count-outer"><span class="count-text count-4">673</span></div>
					<h4 class="counter-title">LOREM IPSUM DOLOR</h4>
				</article>
			</div>
		</div>
	</div>
</div>

​

Answer 1

$(document).ready(function() {
        $(document).on("myEvent",function(){
            $('.numbers.in-view .count-text').each(function () {
            var $this = $(this);
            $({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 4000,
                easing: 'swing',
                step: function () {
                  $this.text(Math.ceil(this.Counter));
                }
            });
        });
    });

在$element.addClass("in-view")之后添加以下内容

$(document).trigger("myEvent");

更新

$(document).ready(function() {
            $(document).on("myEvent",function(){
                $('.numbers.in-view .count-text').each(function () {
                var $this = $(this);
                $({ Counter: 0 }).animate({ Counter: parseInt($this.text()) }, {
                    duration: 4000,
                    easing: 'swing',
                    step: function () {
                      $this.text(Math.ceil(this.Counter));
                    }
                });
            });
        });

您需要使用parseInt函数在动画函数中将值解析为数字。

更新2

$(document).ready(function() {
                $(document).on("myEvent",function(){
                    $('.numbers.in-view .count-text').each(function () {
                    $(this).animateNumber({ number: parseInt($this.text()) });
                    });
                });
            });

更新3

HTML

<div class="col-md-1 numbers animation-element slide-left testimonial">
    <div class="fact-counter">
        <div class="row clearfix">
            <div class="counter-outer clearfix">
                <article class="column col-sm-1">
                    <div class="count-icon"><i class="awesome fa-cogs"></i></div>
                    <div class="count-outer"><span class="count-text count-1">15</span></div>
                    <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
                </article>
                <article class="column col-sm-1">
                    <div class="count-icon"><i class="awesome fa-heart-o"></i></div>
                    <div class="count-outer">+<span class="count-text count-2" data-number="5000">0</span></div>
                    <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
                </article>
                <article class="column col-sm-1">
                    <div class="count-icon"><i class="awesome fa-globe-o"></i></div>
                    <div class="count-outer"><span class="count-text count-3" data-number="482">0</span></div>
                    <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
                </article>
                <article class="column col-sm-1">
                    <div class="count-icon"><i class="awesome fa-globe-o"></i></div>
                    <div class="count-outer"><span class="count-text count-4" data-number="673">0</span></div>
                    <h4 class="counter-title">LOREM IPSUM DOLOR</h4>
                </article>
            </div>
        </div>
    </div>
</div>

JS

$(document).ready(function() {
                    $(document).on("myEvent",function(){
                        $('.numbers.in-view .count-text').each(function () {
                        $(this).animateNumber({ number: parseInt($this.attr("data-number")) });
                        });
                    });
                });