如何使用jquery在悬停时旋转图像？

我想旋转一个'回到顶部'按钮360度悬停而没有在mouseleave上旋转。我已经尝试了多种我已经找到的jQuery代码的变体，但我仍然无法使其工作。以下是我迄今为止获得的真实示例（图像之间的CSS悬停）。如何使用jquery在悬停时旋转图像？

我试图改变的jQuery来mouseenter，mouseover，hover以及包括和rotate数后省略;，也没有用。这是一个简单的jQuery语法错误，我正在做？

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

来源

2016-09-20 KingDesigns

您可以使用两个图像，显示已旋转的面试结束后旋转第一个，然后隐藏第一个？ –

@PrashanthSubramanian悬停图像比静态图像色调稍暗。只是我希望能够有'scrollup-circle'图像到'scrollup-textandarrow'图像旋转，悬停/的mouseenter /鼠标悬停360度旋转，悬停/的mouseenter /鼠标悬停 – KingDesigns

，您可以在使用jQuery像下面做

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

 
<style type="text/css"> 
 

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

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

 
.change{ 
 
\t -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(){ 
 
\t $(this).addClass("change").delay(5000).queue(function(){ 
 
\t \t $(this).removeClass("change").dequeue(); 
 
\t }); 
 
\t 
 
}); 
 

 

 

 
</script> 
 

 

 

 

 
</body> 
 

 

 
</html>

注：（之后）--->我没有得到你在最后的评论真的问什么。但试试这个你的评论问题:) .hope它会帮助你。

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

 
<style type="text/css"> 
 

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

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

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

 
.myopacity{ 
 
\t 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(){ 
 

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

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

 

 

 
</script> 
 

 

 

 

 
</body> 
 

 

 
</html>

来源

2016-09-20 03:50:27

-360我想图像旋转每次鼠标进入元素。这是真棒，但添加类将只为一个MouseEnter事件 – KingDesigns

我正在它的工作，给我几分钟 –

好，感谢@AnuradhS – KingDesigns

您可以使用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; 
}

来源

2016-09-20 03:53:06

请看这里的例子http://codepen.io/nguyenpc/pen/jrrJzm –

这不是我所追求的，因为对象将在mouseleave上取消旋转。每次鼠标进入div时，我都希望图像旋转360度 – KingDesigns

您可以使用cssanimation，.hover()，animationend事件。在.hover()事件处理程序设置元素的@keyframes名animation-name，设置元素空字符串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>

来源

2016-09-20 05:07:11 guest271314

如何使用jquery在悬停时旋转图像？

回答

相关问题