如何在mouseenter和mouseleave上使用jQuery淡化2张图像？
[英]How do I fade 2 images with jQuery on mouseenter and mouseleave?
问题描述
I have a custom button (code below). 
我有一个自定义按钮（下面的代码）。 I want it to: 我希望它：
- rotate quickly 360 on
mouseenter(currently working fine)在mouseenter上快速旋转360度（当前工作正常） - fade quickly to a darker image on
mouseenter(also currently working fine)在mouseenter上快速淡化为较暗的图像（目前也可以正常工作） - NOT un-rotate on
mouseleave(currently working fine)在mouseleave上不旋转（当前工作正常）
I can't yet figure out how to: 我还不知道如何：
- fade back to the original image on
mouseleave( not working yet )在mouseleave上退回到原始图像（ 尚无法使用 ）
I have tried so many variations of jQuery including .hover , .fadeToggle , fadeIn , fadeOut as well as animate but none have seemed to work for me. 我尝试了jQuery的多种变体，包括.hover ， .fadeToggle ， fadeIn ， fadeOut以及animate但是似乎没有一个适合我。
Am I missing something really simple and obvious? 我错过了一些真正简单明显的东西吗？
NOTE: I have just used the Apple logo for demonstration here. 注意：我刚刚在这里使用Apple徽标进行演示。 If I can get the 'fade back on mouseleave' working I can just transfer it to my real life situation. 如果我能使“淡出淡出”的效果恢复原状，就可以将其转移到我的现实生活中。
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>
Thanks in advance! 提前致谢！
3 个解决方案
解决方案1
0 2016-09-21 04:12:20
is this what you want. 这是你想要的吗。 hope this will help to you. 希望对您有帮助。
<!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>
解决方案2
0 2016-09-21 04:58:09
I'm not 100% certain what you are after... I think this is close. 我不确定100％会追捕您...我认为这已经很接近了。 Rotates 360° and opacity dims to 60%, then rotates back to 0° and full opacity. 旋转360°，不透明度变暗至60％，然后旋转回0°，完全不透明度。
No clue why you even needed the opacity class or the associated jQuery for it. 不知道为什么您甚至需要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>
If you want the images in the actual HTML, then you can use the jQuery hover function to alter the image sources. 如果要使用实际的HTML中的图像，则可以使用jQuery悬停功能来更改图像源。
解决方案3
0 已采纳 2016-09-22 01:33:56
Found it. 找到了。
Trying to manage two transitions on the exact same element was making it too complicated. 试图在完全相同的元素上管理两个过渡使它过于复杂。
I ended up having to add one class to the img element and another to the div element. 我最终不得不将一个类添加到img元素，将另一个类添加到div元素。 The img element now manages the rotation and the div element manages the fade through simple CSS :hover transitions. img元素现在通过简单的CSS :hover过渡来管理旋转，而div元素则管理淡入。
This makes the jQuery much more simple. 这使jQuery更简单。
See updated code below: 请参阅下面的更新代码：
$("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>
Kind of cheated with not using jQuery for the fade transition (as originally hoped for) but this works equally as well! 有点不使用jQuery进行淡入淡出过渡（正如最初希望的那样），但这同样有效！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.