each() 只到达一个元素
each() reaching only one element
我向下滚动到我网站的某个位置,然后调用 each()
函数来为所有数字设置动画 (4)。但是 each()
函数只循环一次,所以只有一个数字是动画的。
var activated = 0;
$(window).scroll(function() {
var hT = $('#scroll-to-numbers').offset().top,
hH = $('#scroll-to-numbers').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT + hH - wH)) {
if (activated == 0) {
activated = 1;
animateNumbers();
}
}
});
function animateNumbers(){
$('#number-animate').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 9000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
<div class="row ">
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span id="animate-number">1998</span>
</p>
</div>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span id="animate-number">250</span>
</p>
</div>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span id="animate-number">15</span>
</p>
</div>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span id="animate-number">350</span>
</p>
</div>
</div>
请试试这个 fiddle,需要做一些更改
- 一份 html 文档只能有一个文档 ID
- 你在 jquery 中提到了 #scroll-to-top 元素,但在 html
中没有添加它
这里正在工作working demo
这是您的 html 代码,您可以在任何地方添加滚动条,也可以更改 class 名称,但也请在 js 中进行更改。
<div class="row " id='scroll'>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">1998</span>
</p>
</div>
<div class="col ">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">250</span>
</p>
</div>
<div class="col ">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">15</span>
</p>
</div>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">350</span>
</p>
</div>
</div>
这是js代码
var activated = 0;
$(window).scroll(function() {
var hT = $('#scroll').offset().top,
hH = $('#scroll').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
if(activated == 0)
{
activated = 1;
animateNumbers();
}
}
});
function animateNumbers(){
console.log('called');
$('.bodytext>.animate-number').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 9000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
为了更好的滚动效果请试试这个fiddle demo
首先,在这种情况下使用 CLASS 代替 ID。
其他,.each() 通常在内部循环,就像 A.Wolff 解释的那样。
让我们试着改变你们中的一些人 HTML 和你们的一些 JS:
HTML
<div class="row">
<div class="col animate-number-wrapper">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">1998</span>
</p>
</div>
<div class="col animate-number-wrapper">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">250</span>
</p>
</div>
<div class="col animate-number-wrapper">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">15</span>
</p>
</div>
<div class="col animate-number-wrapper">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">350</span>
</p>
</div>
JS
function animateNumbers(){
$('.animate-number-wrapper').each(function () {
$elem = $(this).find('.animate-number');
$elem.prop('Counter',0).animate({
Counter: $elem.text()
}, {
duration: 9000,
easing: 'swing',
step: function (now) {
$elem.text(Math.ceil(now));
}
});
});
}
我向下滚动到我网站的某个位置,然后调用 each()
函数来为所有数字设置动画 (4)。但是 each()
函数只循环一次,所以只有一个数字是动画的。
var activated = 0;
$(window).scroll(function() {
var hT = $('#scroll-to-numbers').offset().top,
hH = $('#scroll-to-numbers').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT + hH - wH)) {
if (activated == 0) {
activated = 1;
animateNumbers();
}
}
});
function animateNumbers(){
$('#number-animate').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 9000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
<div class="row ">
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span id="animate-number">1998</span>
</p>
</div>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span id="animate-number">250</span>
</p>
</div>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span id="animate-number">15</span>
</p>
</div>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span id="animate-number">350</span>
</p>
</div>
</div>
请试试这个 fiddle,需要做一些更改 - 一份 html 文档只能有一个文档 ID - 你在 jquery 中提到了 #scroll-to-top 元素,但在 html
中没有添加它这里正在工作working demo
这是您的 html 代码,您可以在任何地方添加滚动条,也可以更改 class 名称,但也请在 js 中进行更改。
<div class="row " id='scroll'>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">1998</span>
</p>
</div>
<div class="col ">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">250</span>
</p>
</div>
<div class="col ">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">15</span>
</p>
</div>
<div class="col">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">350</span>
</p>
</div>
</div>
这是js代码
var activated = 0;
$(window).scroll(function() {
var hT = $('#scroll').offset().top,
hH = $('#scroll').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
if(activated == 0)
{
activated = 1;
animateNumbers();
}
}
});
function animateNumbers(){
console.log('called');
$('.bodytext>.animate-number').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 9000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
为了更好的滚动效果请试试这个fiddle demo
首先,在这种情况下使用 CLASS 代替 ID。
其他,.each() 通常在内部循环,就像 A.Wolff 解释的那样。
让我们试着改变你们中的一些人 HTML 和你们的一些 JS:
HTML
<div class="row">
<div class="col animate-number-wrapper">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">1998</span>
</p>
</div>
<div class="col animate-number-wrapper">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">250</span>
</p>
</div>
<div class="col animate-number-wrapper">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">15</span>
</p>
</div>
<div class="col animate-number-wrapper">
<h3 class="text-center">text</h3>
<p class="bodytext">
<span class="animate-number">350</span>
</p>
</div>
JS
function animateNumbers(){
$('.animate-number-wrapper').each(function () {
$elem = $(this).find('.animate-number');
$elem.prop('Counter',0).animate({
Counter: $elem.text()
}, {
duration: 9000,
easing: 'swing',
step: function (now) {
$elem.text(Math.ceil(now));
}
});
});
}