<!DOCTYPE html>
<html>
<head>
<title>Alive Time</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="code.js"></script>
</head>
<body>
<i class="fa fa-cog" style="font-size:100px"></i>
<i class="fa fa-arrow-right" style="font-size:100px"></i>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------
.fa-cog{
margin: 10% 50%;
color: red;
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.down {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.fa-arrow-right{
margin-bottom: 10px;
position: relative;
transition: all 3s linear;
-moz-transition: all 3s linear;
-webkit-transition: all 3s linear;
}
.move{
/*transform: translate(900px,0);
-webkit-transform: translate(900px,0);
-o-transform: translate(900px,0);
-moz-transform: translate(900px,0);*/
position: absolute;
left: 500px;
}
--------------------------------------------------------------------------------------------------------------
$(document).ready(function(){
$(".fa-cog").on('mouseenter',function(){
$(this).toggleClass("down");
});
$(".fa-cog").on('mouseleave',function(){
$(this).toggleClass("down");
});
//using classes
$(".fa-arrow-right").on('click',function(){
loop();
function loop(){
$(".fa-arrow-right").css({left:0});
$(".fa-arrow-right").animate({left:'500px'},2000,'linear',function(){
loop();
});
}
});
});
I want to build an arrow which upon click move to right. I also wanna put this animation infinitely. My code seems that its correct but its not restarting the animation plus the animation is also not smooth. It takes a buffering effect,stoping at points and then moving again. Can u guys please tell whats the problem ?. ignore the cog animation code its working fine.
I replied to this on your other topic but I see the real issue now.
transition: all 3s linear;
-moz-transition: all 3s linear;
-webkit-transition: all 3s linear;
These CSS properties on .fa-arrow-right are interfering with the jQuery animation. In general, these two don’t play well. What jQuery animation does is it moves the left property multiple times until it reaches the point you specified. However, with the transition property, each time it tries to modify the left property it’s being told to slow it down to 3 seconds.
1 Like
Yeah thanks but the real problem is its not starting again. I want to put infinite animation effect means after reaching its end point it starts again . I am using a call back function for this my code seems fine but after reaching its end point it doesnt start again . ?
$(".fa-arrow-right").on('click',function(){
var myfunc=setInterval(loop,2000);
function loop(){
$(".fa-arrow-right").css({left:'0px'});
$(".fa-arrow-right").animate({left:'500px'},2000,'linear');
}
});
also tried this code doesnt work either !! setinterval is calling loop function after every 2 seconds. I think this is the better way to achieve infinite effect… still doesnt work
The infinite effect was already working for me without having to change the code. Maybe it’s something to do with your browser or computer.
I wouldn’t be too reliant on setInterval. It tends to trip over itself after some time since it’s not entirely accurate. You could maybe try these, though, just to see if it works.
$(".fa-arrow-right").on('click',function(){
loop();
setInterval(loop,2100);
function loop(){
$(".fa-arrow-right").css({left:'0px'});
$(".fa-arrow-right").animate({left:'500px'},2000,'linear');
}
});
or
$(".fa-arrow-right").on('click',function(){
loop();
function loop(){
$(".fa-arrow-right").css("left", "0px");
$(".fa-arrow-right").animate({left:'500px'},2000,'linear', function(){
setTimeout(loop, 50);
});
}
});
The idea here is to give the function a little space before it restarts, but I still don’t think it’s as reliable as using a dedicated animation library.
yeah mate the code u gave is working fine. but what was the problem with both of my codes. the setinterval one and the other in main question ? why is that yours working and not mine
the first code you provided works and after 14 to 15 animation effect it stops. I dont know why it do that. Another thing the only difference with my setinterval code and urs setinterval code is that I didnt invoke the loop() function before setInterval(loop,2100) beacuse in documentation it states that setinterval will call the provided function with given interval so I thought that we dont have to call the function explicitly but that doesnt seems to be the case here. Even the examples in w3schools show that it should work like my way too but Jquery can be sometimes to wierd. And about the code I provided in my main question,if thats working in ur browser than maybe I am using a wrong script or something 
I dont know … I am new to jQuery just trying things to grab the concepts. Will surely use some library when real work will come.
It’s just a matter of whether the animation is ready. Your old code was basically telling the arrow to restart the animation when it wasn’t finished yet. While that may not be the case if you’re reading the code, the browser needs a few milliseconds to actually complete what it’s told to do. Even though you specified the code to run every 2000ms, the bit of lag makes it more like 2050 ms or 2013 ms depending on the computer.
1 Like
Well, as I said earlier setTimeout and setInterval can be unreliable. It’s not really your fault. jQuery animate uses them under the hood too which can cause problems for slower computers. As a matter of fact, jQuery animation actually preceded CSS3 animations. CSS3 animations were made to improve on jQuery animation, and modern libraries were made to improve on CSS3 animations. There isn’t really much reason to use jQuery for animation - it’s used more for DOM manipulation and AJAX calls.
As for setInterval it’s not really a jQuery issue. setInterval is supposed to start out with the delay.
1 Like
$(".fa-arrow-right").on('click',function(){
setInterval(loop,2200);
function loop(){
$(".fa-arrow-right").css({left:'0px'});
$(".fa-arrow-right").animate({left:'500px'},2000,'linear');
}
});
Yeah u are right. It is extremely unreliable. just like my above code if I dont invoke loop() above the setinterval() It doesnt work even though it should according to concept upon which setinterval() works. Am I saying right up here or again doing something wrong ?
No no. The setInterval is supposed to have that delay. Think of it as a repeating setTimeout. It still needs that initial specified time to start. The unreliable part is when it doesn’t keep track of the time accurately as it’s repeating.
For comparison I went ahead and made a codepen of your code. By default, it’s animating with CSS3. When you click on it it’ll animate using an animation library.
1 Like
lolz am I really that dumb or there is some kind of communication gap. What kind of delay ? if u omit loop() it does’nt even work at the first place,it animate once and thats it. As u can see in the above code I did what u said,gave setInterval a interval of 2200ms and animate() a duration of 2000ms. 200ms difference for the function to start again after animation ends. But all it do is when I click the arrow it starts the animation reach the end point and thats it,doesnt starts again (it does all this if we dont call loop() above setinterval() ). I am really sorry if I am getting u annoyed mate 
. But if we call a loop() function above setinterval(), it works (obviously with the time difference as you said so)
I was talking about the initial delay. The repeat happens on my end even without the loop call before the setInterval. Are you clicking the arrow more than once? If you click it only once it should work. If you click it numerous times it won’t repeat. I’m assuming it’s because it clogs up some sort of queue.
1 Like
yeah it works now. turns out my browser hangs up thats why I couldnt saw the animation lolz. I really appreciate ur help brother 
1 Like
No problem. I learned a bit about jQuery animation too as I played with it.
1 Like