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

【问题标题】：How do I rotate an image on hover using jquery?如何使用 jquery 在悬停时旋转图像？
【发布时间】：2016-09-20 03:41:44
【问题描述】：

我正在尝试在悬停时将“返回顶部”按钮旋转 360 度，而不会在鼠标离开时不旋转。我已经尝试了多种我发现的 jQuery 代码变体，但我似乎仍然无法让它工作。这是迄今为止我所获得的真实示例（CSS 也可以在图像之间悬停）。

我尝试将 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);
});

【问题讨论】：

你可以使用两张图片，在你完成旋转第一张之后显示旋转的一张，然后隐藏第一张吗？
@PrashanthSubramanian 悬停图像的色调比静态图像稍暗。我只想让scrollup-circle 图像在scrollup-textandarrow 图像上悬停/mouseenter/mouseover 时旋转360 度以在悬停/mouseenter/mouseover 上旋转-360

标签： javascript jquery rotation jquery-animate jquery-rotate

【解决方案1】：

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

注意：（之后）--->我没有得到你在上一条评论中真正提出的问题。但试试这个作为你的评论问题:)。希望它对你有帮助。

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

【讨论】：

我希望每次鼠标进入元素时图像都会旋转。这很棒，但是添加类只适用于一个 mouseenter 事件
工作完成，查看更新的答案并根据需要更改transition 时间。注意：transition time should equal to delay time in the jQuery function.
如果我想在较亮和较暗的图像之间添加渐变怎么办？我不能使用 CSS，因为这会导致 jQuery 反转。我如何将淡入淡出切换到上面的那个？ @AnuradhS
为您的comment 问题添加了尝试。试试吧。抱歉，如果这不是您所期望的。祝你编码顺利。
如何在 mouseleave 上让不透明度恢复正常？ @AnuradhS

【解决方案2】：

您可以使用带有旋转动画的 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;
}

【讨论】：

这不是我想要的，因为对象将在鼠标离开时不旋转。我希望每次鼠标进入 div 时图像旋转 360

【解决方案3】：

您可以使用cssanimation、.hover()、animationend 事件。在.hover() 事件处理程序处将元素的animation-name 设置为@keyframes 的名称，在animationend 事件处将元素的animation-name 设置为空字符串

$(".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>

【讨论】：