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

我有一个自定义按钮（下面的代码）。我希望它：如何使用jQuery在mouseenter和mouseleave上淡出2个图像？

上mouseenter很快360旋转的mouseenter快（目前工作的罚款）
褪色较暗的图像（也是目前工作的罚款）上mouseleave
NOT非旋转（当前工作精）

我还不能弄清楚如何：

发德回原始图像mouseleave（尚未工作）

我已经试过jQuery的这么多的变化，包括.hover，.fadeToggle，fadeIn，fadeOut以及animate，但没有一个似乎为我工作。

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

注意：我刚刚在此处使用Apple徽标进行演示。如果我可以通过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>

提前感谢！

来源

2016-09-21 KingDesigns

https://jsfiddle.net/adeneo/8wv71d3f/ – adeneo

找到它。

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

我最终不得不添加一个类到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的淡入淡出过渡被骗（最初希望的），但是这个工作同样也！

来源

2016-09-22 01:33:56 KingDesigns

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

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

 
var thevalue = 1; 
 
$("div.main").mouseenter(function(){ 
 
\t $(this).addClass("change").fadeTo('fast',0.7).delay(5000).queue(function(){ 
 
\t \t $(this).removeClass("change").fadeTo('slow',1.0).dequeue(); 
 
\t }); 
 
\t 
 
}); 
 

 

 

 
</script> 
 

 

 

 

 
</body> 
 

 

 
</html>

来源

2016-09-21 04:12:20

差不多。我希望不透明度**淡出**恢复正常（不透明度：1）。 @AnuradhS – KingDesigns

在这里，当你鼠标进入'不透明度：0.7'，然后旋转'不透明度：1.0'后。所以？ –

不透明度需要**逐渐**。以上变为不透明：1.0 **即时**。我不可能是瞬间的，它必须是渐进的。 @AnuradhS – KingDesigns

我不是100％肯定你是什么后...我认为这是接近。旋转360°，不透明度调暗至60％，然后旋转至0°并完全不透明。

不知道为什么你甚至需要不透明类或关联的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的悬停功能来改变图像的来源。

来源

2016-09-21 04:58:09 Scott

我需要关联的jQuery，因为我不希望它在'mouseleave'上取消旋转。 – KingDesigns

@KingDesigns哦，好的..我以为你*想让它在鼠标离开时旋转。检查更新后的代码片段...现在不会旋转，但不透明度将回到100％.....并且仍然不需要额外的jQuery。 – Scott

对不起，我应该指定确切的情况。这是我正在建立的'回顶部'。每次**鼠标进入时，它必须旋转360 ** **。我有一个稍微较暗的图像，它在同一时间必须淡出**回到** mouseleave上的原始图像（无需旋转整个div）。因此，并发症。 @Scott – KingDesigns

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

回答

相关问题