Why is my jquery script animating at different times?
My jquery animation snippets at different times. I want all three to load after scrolling, but the first graph is loaded before everything else. Here is my code:
<div class="container">
<div class="row">
<div class="row-centered">
<div class="col-lg-3 col-centered">
<h1>Increase Sales Time</h1>
<div id="myStathalf1" data-startdegree="45" data-dimension="250" data-text="33%" data-info="Sales Time" data-width="30" data-fontsize="38" data-percent="33" data-fgcolor="#FF6961" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>
</div>
<div class="col-lg-3 col-centered">
<h1>Increase Clients</h1>
<div id="myStathalf2" data-startdegree="45" data-dimension="250" data-text="50%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="50" data-fgcolor="#FF6961" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>
</div>
<div class="col-lg-3 col-centered">
<h1>Decrease Operation Costs</h1>
<div id="myStathalf3" data-startdegree="45" data-dimension="250" data-text="50%" data-info="Sales Operations" data-width="30" data-fontsize="38" data-percent="50" data-fgcolor="#FF6961" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>
</div>
<script>
$(function(){
var isGraph1Viewed=false;
$(window).scroll(function() {
if(isScrolledIntoView($('#myStathalf1')) && isGraph1Viewed==false){$('#myStathalf1').circliful();isGraph1Viewed=true;}
});
function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
}
});
$(function(){
var isGraph2Viewed=false;
$(window).scroll(function() {
if(isScrolledIntoView($('#myStathalf2')) && isGraph2Viewed==false){$('#myStathalf2').circliful();isGraph2Viewed=true;}
});
function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
}
});
$(function(){
var isGraph3Viewed=false;
$(window).scroll(function() {
if(isScrolledIntoView($('#myStathalf3')) && isGraph3Viewed==false){$('#myStathalf3').circliful();isGraph3Viewed=true;}
});
function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
}
});
</script>
</div>
</div>
</div>
I usually need to scroll a little on myStathalf2 or myStathalf3 diagram to load.
+3
source to share
1 answer
I believe that each of the 3 scroll event related functions is fired one after the other, I suggest moving the code one by one:
$(function () {
var isGraph1Viewed = false, isGraph2Viewed = false, isGraph3Viewed = false;
$(window).scroll(function () {
if (isScrolledIntoView($('#myStathalf1')) && isGraph1Viewed == false) {
$('#myStathalf1').circliful();
isGraph1Viewed = true;
}
if (isScrolledIntoView($('#myStathalf2')) && isGraph2Viewed == false) {
$('#myStathalf2').circliful();
isGraph2Viewed = true;
}
if (isScrolledIntoView($('#myStathalf3')) && isGraph3Viewed == false) {
$('#myStathalf3').circliful();
isGraph3Viewed = true;
}
});
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
}
});
This will make the code easier to work with, and I believe that just one function related to the scroll event can solve your problem.
EDIT
Another way is to store the id of the elements that the circliful
called function should receive , and then attach to them and call this function only once:
$(function () {
var isGraph1Viewed = false, isGraph2Viewed = false, isGraph3Viewed = false;
$(window).scroll(function () {
var circle = [];
if (isScrolledIntoView($('#myStathalf1')) && isGraph1Viewed == false) {
circle.push("#myStathalf1");
isGraph1Viewed = true;
}
if (isScrolledIntoView($('#myStathalf2')) && isGraph2Viewed == false) {
circle.push("#myStathalf2");
isGraph2Viewed = true;
}
if (isScrolledIntoView($('#myStathalf3')) && isGraph3Viewed == false) {
circle.push("#myStathalf3");
isGraph3Viewed = true;
}
$(circle.join(',')).circliful();
});
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height() - 10; //the 20 is the amount pixels from the bottom to consider the element in view
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
}
});
+4
source to share