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=".png" class="scrollImg1 scrollup-circle"/>
<img src=".png" class="scrollImg2 scrollup-circle"/>
<img src=".png" class="scrollImg1 scrollup-textarrow"/>
<img src=".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);
});
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./static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle"/>
<img src="https://static1.squarespace./static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle"/>
<img src="https://static1.squarespace./static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow"/>
<img src="https://static1.squarespace./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 Commented Sep 20, 2016 at 3:45
-
@PrashanthSubramanian the hover images are slightly darker tone than the static images. I just want to be able to have the
scrollup-circleimage to rotate 360 degrees on hover/mouseenter/mouseover on thescrollup-textandarrowimage to rotate -360 on hover/mouseenter/mouseover – JaxJames Commented Sep 20, 2016 at 3:54
3 Answers
Reset to default 2you can do it using jQuery like below
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis./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./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 ment. but try this for your ment question :) .hope it will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis./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./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>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;
}
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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollup">
<img src="https://static1.squarespace./static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle" />
<img src="https://static1.squarespace./static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle" />
<img src="https://static1.squarespace./static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow" />
<img src="https://static1.squarespace./static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png" class="scrollImg2 scrollup-textarrow" />
</div>