我合成的动画会在滚动到视图时触发,但它会在每个滚动上触发,而不仅仅是一次。在我的本地版本中添加$(window).off('scroll');停止功能的多次触发,但中断我单独运行的其他滚动动画。
我不确定我在这里错过了什么,所以任何帮助都会很棒:)
$(document).ready(function ($) {
function animateStatsBarVertical() {
$('.progress-vertical--container').each(function () {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if ( elementPos < topOfWindow + $(window).height() - 30 ) {
function statsBarVertical() {
var stats = document.getElementById("stats");
var percentage = document.getElementById("percentage");
var height = 1;
var id = setInterval(frame, 10);
var results_percentage_verticle = '<?php the_field("results_percentage_verticle", $p); ?>';
function frame() {
if (height >= results_percentage_verticle) {
clearInterval(id);
} else {
height++;
stats.style.height = height + '%';
percentage.innerHTML = height * 1 + '%';
}
}
}
statsBarVertical();
}
});
}
animateStatsBarVertical();
$(window).scroll(animateStatsBarVertical);
});
.progress-vertical--container {
position: absolute;
left: 15px;
bottom: 200px;
width: 100px;
text-align: center;
}
.progress-vertical--container .stats-info {
max-width: 85px;
width: 100%;
margin: 0 auto 10px;
}
.progress-vertical--container .info {
font-size: 0.875em;
font-family: "visby_round_cfmedium", sans-serif;
font-weight: 700;
color: green;
text-transform: lowercase;
text-align: center;
width: 100%;
line-height: 14px;
}
.progress-vertical--container .progress-vertical {
width: 40px;
height: 300px;
background-color: grey;
margin: 0 auto;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#stats {
width: 100%;
height: 1%;
text-align: center;
line-height: 30px;
color: red;
background-color: #d04e7c;
}
#percentage {
font-size: 2em;
font-family: "visby_round_cfmedium", sans-serif;
font-weight: 700;
color: #ffffff;
text-transform: lowercase;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="background:red;height:2000px;position: relative;">
<div class="progress-vertical--container">
<!-- progress-vertical container : BEGIN -->
<div class="stats-info">
<div id="percentage"></div>
<div class="info">This is a test</div>
</div>
<div class="progress-vertical">
<div id="stats"></div>
</div>
</div>
<!-- progress-vertical container : END -->
</body>
答案 0 :(得分:0)
您只需添加一个字段即可跟踪动画事件是否触发。首次触发后,请将此字段设置为true
,然后停止再次触发。
$(document).ready(function ($) {
// Tracks if we're fired the event
let fired = false;
function animateStatsBarVertical() {
$('.progress-vertical--container').each(function () {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
// Only true if the element is in view AND has not fired yet
if ( elementPos < topOfWindow + $(window).height() - 30 && fired === false) {
// We've fired, so set to true
fired = true;
function statsBarVertical() {
var stats = document.getElementById("stats");
var percentage = document.getElementById("percentage");
var height = 1;
var id = setInterval(frame, 10);
var results_percentage_verticle = 100; // '<?php the_field("results_percentage_verticle", $p); ?>';
function frame() {
if (height >= results_percentage_verticle) {
clearInterval(id);
} else {
height++;
stats.style.height = height + '%';
percentage.innerHTML = height * 1 + '%';
}
}
}
statsBarVertical();
}
});
}
animateStatsBarVertical();
$(window).scroll(animateStatsBarVertical);
});
.progress-vertical--container {
position: absolute;
left: 15px;
bottom: 200px;
width: 100px;
text-align: center;
}
.progress-vertical--container .stats-info {
max-width: 85px;
width: 100%;
margin: 0 auto 10px;
}
.progress-vertical--container .info {
font-size: 0.875em;
font-family: "visby_round_cfmedium", sans-serif;
font-weight: 700;
color: green;
text-transform: lowercase;
text-align: center;
width: 100%;
line-height: 14px;
}
.progress-vertical--container .progress-vertical {
width: 40px;
height: 300px;
background-color: grey;
margin: 0 auto;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#stats {
width: 100%;
height: 1%;
text-align: center;
line-height: 30px;
color: red;
background-color: #d04e7c;
}
#percentage {
font-size: 2em;
font-family: "visby_round_cfmedium", sans-serif;
font-weight: 700;
color: #ffffff;
text-transform: lowercase;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="background:red;height:2000px;position: relative;">
<div class="progress-vertical--container">
<!-- progress-vertical container : BEGIN -->
<div class="stats-info">
<div id="percentage"></div>
<div class="info">This is a test</div>
</div>
<div class="progress-vertical">
<div id="stats"></div>
</div>
</div>
<!-- progress-vertical container : END -->
</body>