66034

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); });

Answer1:

you can do it using jQuery like below

<pre class="snippet-code-html lang-html prettyprint-override"><!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">

<script type="text/javascript"> $("div.main").mouseenter(function(){ $(this).addClass("change").delay(5000).queue(function(){ $(this).removeClass("change").dequeue(); }); }); </script> </body> </html>

<strong>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.</strong>

<pre class="snippet-code-html lang-html prettyprint-override"><!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">

<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>

Answer2:

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; }

Answer3:

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

<pre class="snippet-code-js lang-js prettyprint-override">$(".scrollup") .hover(function() { $(this).css({"animationName":"rotate", "mozkitAnimationName":"rotate", "webkitAnimationName":"rotate"}); }) .on("animationend.rotate", function() { $(this).css({"animationName":"", "mozkitAnimationName":"", "webkitAnimationName":""}); }); <pre class="snippet-code-css lang-css prettyprint-override">.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); } } <pre class="snippet-code-html lang-html prettyprint-override"><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>

Recommend

  • Make background of annotation box in image semi-transparent
  • Youtube iframe in jquery mobile + phonegap build
  • C# Calculate n Number of Points along a Great Circle path between Two Latitude/Longitude points
  • Box-and-circle diagram of a double pointer?
  • android: get viewHeight programmatically
  • Android: Download images from web and show them on gridview
  • Crop an Image to the size of an ImageView
  • tkinter: Analog clock refreshing - how does “after” function work?
  • How to add power law likelihood to Netlogo Model
  • SQL query solution for getting statistics from my tables
  • DataTables data replacement to multiple columns based on one's value
  • Eyebrow raising animation with SVG path
  • Persistent layers after style change in Mapbox gl js
  • Jquery Mobile Button is not working at Second Click
  • Google Map Kit, draw polylines for walk like google map ios
  • C# - Pan cursor
  • How to plot a filled circle?
  • Object vs Extend in Java
  • Python OpenCV: draw outer contours inside a specific contour
  • Unity3D Website look up returns nil in Unity3D 4.7.2
  • How do you specify node colors for the d3 radial tree?
  • Can't fetch titles from some box-like containers
  • How to put tcp server on another thread in python
  • Animated Ellipse Points
  • How can I keep a d3 mouseover open while my mouse is over the tooltip?
  • Plot vector (or arc) onto a rose plot. MATLAB
  • Draw circle on google maps by passing parameters to the url
  • zooming and panning - upgrading d3 code to d3.v4
  • Combining P values using Fisher method matlab?
  • How do I get narrow width and a large height on a RadioButtons widget, and still have round radio bu
  • Generic EditorTemplate for an Enum with Text Select Option Value
  • How can I compose a VM into a view within an Aurelia validation renderer
  • Add filter to clipped element in svg (combine clipPath and filter elements)
  • Chart js - Draw center of each bubbles of a bubble chart
  • Update data in d3.js group
  • Javascript syntax null : ?{}
  • angularjs ng-bind-html html input part missing
  • How do I properly code a javascript property and method using the 'prototype' function?
  • Circle movement upon rectangle Collision
  • Using a canvas object in a thread to do simple animations - Java