Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery / Jquery Animate / Jquery Rotate / Rotation

How Do I Rotate An Image On Hover Using Jquery?

Post a Comment
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 ca

Solution 1:

you can do it using jQuery like below

<!DOCTYPE html><html><head><title></title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head><styletype="text/css">div.main{
	width: 100px;
	height: 100px;
	
}

div.mainimg{
	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><divclass="main"><imgsrc="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg"></div><pid="dis"></p><scripttype="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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head><styletype="text/css">div.main{
	width: 100px;
	height: 100px;
	
}

div.mainimg{
	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><divclass="main"><imgsrc="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg"></div><pid="dis"></p><scripttype="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>

Solution 2:

You can use css transform with rotate animation 

.scrollup {


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

}
.scrollupimg {
  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;
}

Solution 3:

You can use cssanimation, .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;
}
.scrollupimg {
  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);
  }
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="scrollup"><imgsrc="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png"class="scrollImg1 scrollup-circle" /><imgsrc="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png"class="scrollImg2 scrollup-circle" /><imgsrc="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png"class="scrollImg1 scrollup-textarrow" /><imgsrc="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png"class="scrollImg2 scrollup-textarrow" /></div>

Post a Comment for "How Do I Rotate An Image On Hover Using Jquery?"