Jquery animate() not working

Jquery animate() not working
0

#1
<!DOCTYPE html>
<html>
<head>
  <title>Alive Time</title>
  <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://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="code.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.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);
}
--------------------------------------------------------------------------------------------------------------
$(document).ready(function(){

   $(".fa-cog").on('mouseenter',function(){
 $(this).animate({rotate:180},{
  step:function(now,fx){

    /*$(this).css({' -moz-transform':'rotate('+now+'deg)',
    '-webkit-transform':'rotate('+now+'deg)',
    'transform':'rotate('+now+'deg)'});*/

    $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
  },duration:'slow'},'linear'); 
});
});

Guys I am trying to use specifically animate() method of jquery to rotate a cog. I know I can make a class use some transition,transform and then add or remove that class. But I want to use animate() up here. Couple of docs on stackoverflow said that we don’t actually have to use a real CSS property, like text-index or border-spacing, but instead you can specify a fake CSS property, like rotation or my-awesome-property or else. It might be a good idea to use something that does not risk becoming an actual CSS property in the future. I tried every thing couldnt find the mistake in my code. Ignore the code which I have commented out.


#2

Hello,
It might have something to do with the placement of the script tags. You have placed them in head. However, the js files may take some to “load” and won’t be finished before the html page is rendered.

Try putting the script tags just before the </body> tag. This way the scripts are “loaded” after the html content has rendered.

Btw if code.js is your own JavaScript file, you may want to make it the last script because the scripts are loaded in succession.
This means that if your code.js tries to access bootstrap or popper libraries that are loaded after the code.js file, they very likely won’t seem to work. In reality you try to use libraries that aren’t “loaded” yet.

Anywho. Good luck!


#3

Yeah I was using slim version of jquery. Fix that up including ur pointed out mistakes. But there is another problem up here.

 $(".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 tell whats the problem ?


#4

How bad is this buffering effect that you’re talking about? It might be on your computer’s end. Your code seems to work when I use it on Google Chrome. I did have to give .fa-arrow-right a position property before it would move at all, though.

Also, I don’t know if it’s still the case, but jQuery would use setTimeout instead of requestAnimationFrame to handle its animation. In vanilla JavaScript animation, it’s preferable to use requestAnimationFrame rather than setTimeout/setInterval because the latter only guesses when it’s time to move again whereas requestAnimationFrame actually checks for the next available repaint.

If you’re serious about animating with JavaScript I recommend using a library that’s dedicated to just animation. My personal preference is GreenSock Animation Platform (GSAP).