如何在 mouseenter 和 mouseleave 上用 jQuery 淡化 2 个图像？

Question

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

在 mouseenter 上快速 360 度旋转（目前工作正常）
在 mouseenter 上快速淡化为较暗的图像（目前工作正常）
未在 mouseleave 上取消旋转（目前工作正常）

我还不知道如何：

在 mouseleave 淡出到原始图像（还没有工作）

我尝试了很多 jQuery 的变体，包括 .hover、.fadeToggle、fadeIn、fadeOut 以及 animate 但是none 似乎对我有用。

我是否遗漏了一些非常简单明了的东西？

注意：我刚刚在此处使用了 Apple 徽标进行演示。如果我能让 'fade back on mouseleave' 正常工作，我就可以将它转移到我的现实生活中。

  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>

提前致谢！

Answer 1

这就是你想要的。希望对你有所帮助。

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

Answer 2

我不是 100% 确定您在寻找什么...我认为这很接近。旋转 360° 且不透明度变暗至 60%，然后旋转回 0° 并完全不透明度。

不知道为什么你甚至需要不透明度 class 或相关的 jQuery。

$("div.main").hover( 
  function() {
    $(this).addClass('change').addClass('myopacity');
  },
  function() {
     $(this).removeClass('myopacity')
  });

body { padding: 40px; }

div.main {
  width: 100px;
  height: 100px;
  opacity: 1;
  transition: all .5s;
  transition: all .5s;
  background: url(https://image.freepik.com/free-icon/apple-logo_318-40184.jpg) no-repeat center center;
  background-size: cover;
}
div.main img {
  width: 100%;
  height: 100%;
}

.main.change {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  transition: all .5s;
  background: url(https://image.freepik.com/free-icon/windows-8-logo_318-40228.jpg) no-repeat center center;
  background-size: cover;
}

.change.myopacity { 
  opacity: .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">
  </div>

  <p id="dis"></p>
</body>

</html>

如果你想要实际HTML中的图像，那么你可以使用jQuery悬停功能来改变图像来源。

Answer 3

找到了。

试图在完全相同的元素上管理两个转换太复杂了。

我最终不得不添加一个 class 到 img 元素，另一个添加到 div 元素。 img 元素现在管理旋转，div 元素通过简单的 CSS :hover 转换管理淡入淡出。

这使得 jQuery 变得更加简单。

查看下面的更新代码：

$("div.main").mouseenter(function() {
  
  $(".image").addClass("change").delay(500).queue(function() {
    $(".image").removeClass("change").dequeue();
  });
  
});
// jQuery now much more simple. No need for variables or the if/else statement

div.main {
  width: 100px;
  height: 100px;
  -webkit-transition: all .5s ease-in;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-in;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-in;
  -o-transition: all .5s ease-out;
}
/* This will take care of the fade transition on :hover */

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;
} */
/* The .myopacity class is no longer necessary as it's taken care of through the div.main:hover class below */

div.main:hover, div.main:active, div.main:focus {
  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" class="image">
  </div>

  <p id="dis"></p>
</body>

</html>

不使用 jQuery 进行淡入淡出过渡（正如最初希望的那样）有点受骗，但这同样有效！

如何在 mouseenter 和 mouseleave 上用 jQuery 淡化 2 个图像？

How do I fade 2 images with jQuery on mouseenter and mouseleave?

javascript

jquery

fade

fadeout