如何使用jquery在悬停时旋转图像？
[英]How do I rotate an image on hover using jquery?
问题描述
I am trying to rotate a 'back to top' button 360 degrees on hover WITHOUT un-rotating on mouseleave. 
我试图在悬停时旋转“返回顶部”按钮360度而不在鼠标上旋转。 I have tried multiple variations of jQuery code that I've found but I still can't seem to get it working. 我已经尝试了多种jQuery代码，我发现但我仍然无法让它工作。 Here's the real example of where I've gotten so far (CSS hover between images as well). 这是我到目前为止的真实例子（CSS也在图像之间悬停）。
I have tried changing the jQuery to mouseenter , mouseover , hover as well as including and omitting the ; 我已经尝试将jQuery更改为mouseenter ， mouseover ， hover以及包含和省略; after the rotate number, to no avail. rotate数后，无济于事。 Is it a simple jQuery syntax mistake that I'm making? 这是一个简单的jQuery语法错误，我正在制作？
HTML: 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: 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: JQuery的：
$(".scrollup").mouseover(function() {
$(".scrollup-circle").rotate(360);
});
3 个解决方案
解决方案1
1 已采纳 2016-09-20 03:50:27
you can do it using jQuery like below 你可以使用如下的jQuery来做到这一点
<!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>
解决方案2
1 2016-09-20 03:53:06
You can use css transform with rotate animation 您可以使用css变换和旋转动画
.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;
}
解决方案3
0 2016-09-20 05:07:11
You can use css animation , .hover() , animationend event. 您可以使用css animation ， .hover() ， animationend事件。 Set animation-name of element to name of @keyframes at .hover() event handler, set animation-name of element to empty string at animationend event 集animation-name元素的名称@keyframes在.hover()事件处理程序，设置animation-name在元素的空字符串animationend事件
$(".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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.