javascript - 如何在mouseenter和mouseleave上使用jQuery淡化2张图像？

我有一个自定义按钮（下面的代码）。我希望它：

在mouseenter上快速旋转360度（当前工作正常）
快速消失为mouseenter上较暗的图像（目前也可以正常工作）
不能在mouseleave上旋转（当前工作正常）

我还不知道如何：

退回到mouseleave上的原始图像（尚无法使用）

我尝试了许多jQuery变体，包括.hover，.fadeToggle，fadeIn，fadeOut以及animate，但似乎没有一个适合我。

我错过了一些真正简单明显的东西吗？

注意：我刚刚在这里使用Apple徽标进行演示。如果我能使“淡出淡出”的效果恢复原状，就可以将其转移到我的现实生活中。

  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(500).queue(function() {
    $(this).removeClass("change").dequeue();
  });

});

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

<!DOCTYPE html>
<html>

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

</head>

<body>

  <div class="main">
    <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
  </div>

  <p id="dis"></p>
</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;
}


</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(){
	$(this).addClass("change").fadeTo('fast',0.7).delay(5000).queue(function(){
		$(this).removeClass("change").fadeTo('slow',1.0).dequeue();
	});

});



</script>




</body>


</html>