How do I rotate an image on hover using jquery?

Question

I am trying to rotate a 'back to top' button 360 degrees on hover WITHOUT un-rotating on mouseleave. I have tried multiple variations of jQuery code that I've found but I still can't seem to get it working. Here's the real example of where I've gotten so far (CSS hover between images as well).

I have tried changing the jQuery to mouseenter, mouseover, hover as well as including and omitting the ; after the rotate number, to no avail. Is it a simple jQuery syntax mistake that I'm making?

HTML:

<div class="scrollup">
  <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle"/>
  <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle"/>
  <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow"/>
  <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png" class="scrollImg2 scrollup-textarrow"/>
</div>

CSS:

.scrollup {
  width: 45px;
  height: 45px;
  display: block;
  margin-left: auto;
  position: relative;
  cursor: pointer;
}
.scrollup img {
  position: absolute;
}
.scrollImg2 {
  opacity: 0;
}
.scrollup:hover > .scrollImg1 {
  opacity: 0;
}
.scrollup:hover > .scrollImg2 {
  opacity: 1;
}

JQuery:

$(".scrollup").mouseover(function() {
    $(".scrollup-circle").rotate(360);
});

can you use two images, show the rotated one after you're done rotating the first one, and then hide the first one? — Prashanth Subramanian, Sep 20 '16 at 03:45
@PrashanthSubramanian the hover images are slightly darker tone than the static images. I just want to be able to have the `scrollup-circle` image to rotate 360 degrees on hover/mouseenter/mouseover on the `scrollup-textandarrow` image to rotate -360 on hover/mouseenter/mouseover — JaxJames, Sep 20 '16 at 03:54

caldera.sac · Accepted Answer · 2016-09-20T09:06:42.210

you can do it using jQuery like below

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
</head>

<style type="text/css">

div.main{
 width: 100px;
 height: 100px;
 
}

div.main img{
 width: 100%;
 height: 100%;
}

.change{
 -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
    transition-duration: 5s;
}

   

</style>


<body>

<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>

<p id="dis"></p>

<script type="text/javascript">


$("div.main").mouseenter(function(){
 $(this).addClass("change").delay(5000).queue(function(){
  $(this).removeClass("change").dequeue();
 });
 
});



</script>




</body>


</html>

NOTE:(AFTER) ---> I didn't get what you ask really in your last comment. but try this for your comment question :) .hope it will help to you.

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
</head>

<style type="text/css">

div.main{
 width: 100px;
 height: 100px;
 
}

div.main img{
 width: 100%;
 height: 100%;
}

.change{
 -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
    transition-duration: 5s;
}

.myopacity{
 opacity: 0.6;
}



</style>


<body>

<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>

<p id="dis"></p>

<script type="text/javascript">

var thevalue = 1;
$("div.main").mouseenter(function(){

 thevalue = thevalue+1;
 if(thevalue%2==0)
 {
  $(this).addClass("myopacity");
 }
 else
 {
  $(this).removeClass("myopacity");
 }

 $(this).addClass("change").delay(5000).queue(function(){
  $(this).removeClass("change").dequeue();
 });
 
});



</script>




</body>


</html>

I want the image to rotate EACH TIME the mouse enters the element. This is awesome, but adding the class will only work for one mouseenter event — JaxJames, Sep 20 '16 at 03:58
job done, see the updated answer and change the `transition` time as your need.Note: `transition time should equal to delay time in the jQuery function.` — caldera.sac, Sep 20 '16 at 04:59
What if I want to add a gradual fade between the lighter and darker image? I can't use CSS as this causes the jQuery to reverse. How do I a fade toggle to that above? @AnuradhS — JaxJames, Sep 20 '16 at 07:49
added a try for your `comment` question. try it. sorry if this is not what you expected. good luck with your coding. — caldera.sac, Sep 20 '16 at 09:07
How do I make the opacity fade back to normal on mouseleave? @AnuradhS — JaxJames, Sep 21 '16 at 01:31

score 1 · Answer 2 · answered Sep 20 '16 at 03:53

You can use css transform with rotate animation

.scrollup {


width: 45px;
  height: 45px;
  display: block;
  margin-left: auto;
  position: relative;
  cursor: pointer;

}
.scrollup img {
  position: absolute;
    -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;

}
.scrollImg2 {
  opacity: 0;
}
.scrollup:hover{

}
.scrollup:hover > img {
  opacity: 0;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
.scrollup:hover > .scrollImg2 {
  opacity: 1;
}

This is not what I'm after as the object will un-rotate on mouseleave. I want the image to rotate 360 each time the mouse enters the div — JaxJames, Sep 20 '16 at 03:57

score 0 · Answer 3 · answered Sep 20 '16 at 05:07

You can use css animation, .hover(), animationend event. Set animation-name of element to name of @keyframes at .hover() event handler, set animation-name of element to empty string at animationend event

$(".scrollup")
.hover(function() {
  $(this).css({"animationName":"rotate",
               "mozkitAnimationName":"rotate",
               "webkitAnimationName":"rotate"});
})
.on("animationend.rotate", function() {
  $(this).css({"animationName":"",
               "mozkitAnimationName":"",
               "webkitAnimationName":""});
});

.scrollup {
  width: 45px;
  height: 45px;
  display: block;
  margin-left: 50%;
  position: relative;
  cursor: pointer;
  animation-duration: 2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
}
.scrollup img {
  position: absolute;
}
.scrollImg2 {
  opacity: 0;
}
.scrollup:hover > .scrollImg1 {
  opacity: 0;
}
.scrollup:hover > .scrollImg2 {
  opacity: 1;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollup">
  <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle" />
  <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle" />
  <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow" />
  <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png" class="scrollImg2 scrollup-textarrow" />
</div>

How do I rotate an image on hover using jquery?

3 Answers3

Linked