Question

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

在dict上快速旋转360（目前正常工作）
在mouseenter上快速淡化为较暗的图像（当前也正常工作）
不要在mouseenter上取消轮播（目前工作正常）

我还不知道如何：

淡出mouseleave上的原始图片（尚未工作）

我尝试了很多jQuery变体，包括mouseleave，.hover，.fadeToggle，fadeIn以及fadeOut，但似乎没有我

我错过了一些非常简单明了的东西吗？

注意：我刚刚使用Apple徽标进行演示。如果我可以让“淡入淡出鼠标”工作，我可以将它转移到我现实生活中。

animate

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

提前致谢！

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

我不是百分之百确定你的目标......我认为这很接近。旋转360°，不透明度变暗至60％，然后旋转回0°和完全不透明度。

不知道为什么你甚至需要opacity类或相关的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

找到它。

尝试在完全相同的元素上管理两个转换使它变得太复杂。

我最后需要在img元素中添加一个类，在div元素中添加另一个类。 img元素现在管理旋转，div元素通过简单的CSS :hover转换来管理淡入淡出。

这使得jQuery更加简单。

请参阅以下更新代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

因为没有使用jQuery进行淡入淡出过渡而被欺骗（原本希望如此），但这同样有效！

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

3 个答案: