如何在jQuery中切换淡入/淡出效果？
[英]How do I switch the fadeIn/fadeOut effect on an image in jQuery?
问题描述
I've got this working to an 'almost ready' state: http://jsbin.com/icuvit 
我已经将其工作到“几乎准备就绪”的状态： http : //jsbin.com/icuvit
Can someone show me how to fix this, so if I hover it goes dark, instead of being dark in the first instance. 有人可以告诉我如何解决此问题，所以如果我将鼠标悬停，它就会变暗，而不是一开始就变暗。 So it goes from normal -> dark . 所以它是从正常->黑暗开始的 。
What do I change in the js code below? 我在下面的js代码中做了哪些更改？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="mask-div"></div>
<img id="test-img" src="http://www.google.ca/intl/en_ca/images/logo.gif">
<script>
$(document).ready( function() {
$("#mask-div")
.css({
"position": "absolute",
"width": 275,
"height": 110,
"background": "rgba(0, 0, 0, 0.5)",
"display": "block"
})
.mouseover( function() {
$(this).fadeOut("slow");
})
;
$("#test-img").mouseout( function() {
$("#mask-div").fadeIn("slow");
});
});
</script>
</body>
</html>
Many thanks for any pointers. 非常感谢您的指导。
3 个解决方案
解决方案1
3 已采纳 2011-11-15 14:44:57
You'd need to swap things a bit: 您需要进行一些交换：
- Hide the mask initally 最初隐藏面具
- When the image is mouseover-ed, show the mask (when the mask is not yet visible, you'll mouseover the image) 当鼠标悬停在图像上时，显示遮罩（当遮罩尚不可见时，您将鼠标悬停在图像上）
- When the mask is mouseout-ed, hide the mask (when the mask is already visible, you'll mouseout the mask) 鼠标移出遮罩后 ，隐藏遮罩（当遮罩已经可见时，您将鼠标移出遮罩）
Like: http://jsbin.com/icuvit/3/edit . 像： http : //jsbin.com/icuvit/3/edit 。
$("#mask-div")
.css({
"position": "absolute",
"width": 275,
"height": 110,
"background": "rgba(0, 0, 0, 0.5)"
})
.mouseout( function() {
$("#mask-div").fadeOut("slow");
})
.hide();
$("#test-img")
.mouseover( function() {
$("#mask-div").fadeIn("slow");
});
And some CSS for the first time: 还有一些CSS：
#mask-div {
display: none;
}
解决方案2
1 2011-11-15 14:46:15
If you actually use some other selectors which results in multiple images you can still use pimvdb's technique in the following way. 如果您实际上使用其他选择器会产生多张图像，您仍然可以通过以下方式使用pimvdb的技术。
$('.test-img').each(function(){
var $img = $(this);
$("#mask-div")
.css({
"position": "absolute",
"width": 275,
"height": 110,
"background": "rgba(0, 0, 0, 0.5)"
})
.mouseout( function() {
$("#mask-div").fadeOut("slow");
})
.hide();
$img.mouseover( function() {
$("#mask-div").fadeIn("slow");
});
});
解决方案3
1 2011-11-15 14:54:16
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="mask-div"></div>
<img id="test-img" src="http://www.google.ca/intl/en_ca/images/logo.gif">
<script>
$(document).ready( function() {
$("#mask-div")
.css({
"position": "absolute",
"width": 275,
"height": 110,
"background": "rgba(0, 0, 0, 0.5)",
"display": "none"
})
.mouseout( function() {
$(this).fadeOut("slow");
})
;
$("#test-img").mouseover( function() {
$("#mask-div").fadeIn("slow");
});
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.