更改除所选元素之外的所有元素的不透明度
我在一个页面上有三个图像，我想淡出未单击的元素。该脚本在第一个实例中起作用，因此如果您单击一张图片，其他两张图片就会消失。如果您认为单击一张已经褪色的图片，那么最后一张未褪色的图片也会褪色，而不是 100% 不透明度而另外两张褪色。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.opac {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
border:thick;
}
</style>
<script>
$(document).ready(function(){
$('a.images').click(function()
{
$(this).siblings().stop().animate({opacity: 0.4}, 300);
$('a.images').click(function()
{
$not('this').stop().animate({opacity: 1.0}, 300);
});
});
});
</script>
</head>
html
<body>
<div id="images">
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
</div>
</body>
</html>
I have three images on a single page and I would like to fade out the elements that aren't clicked on. The script works in the first instance so if you click on one picture, the other two fade. If you think click on an already faded picture, all that happens is that last non-faded picture also fades, instead of it being 100% opacity and the other two faded.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.opac {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
border:thick;
}
</style>
<script>
$(document).ready(function(){
$('a.images').click(function()
{
$(this).siblings().stop().animate({opacity: 0.4}, 300);
$('a.images').click(function()
{
$not('this').stop().animate({opacity: 1.0}, 300);
});
});
});
</script>
</head>
html
<body>
<div id="images">
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
<a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您将在
click处理程序内附加一个click处理程序。每次单击时，都会添加一个新的单击处理程序，并在每次后续单击时调用该处理程序。单击处理程序首先调用最新添加的图像，这意味着最后所有图像都设置为透明。
如果您希望单击的图片不透明，而其他图片透明，请尝试以下操作：
演示：http:// jsfiddle.net/gCsRL/1/
You are attaching a
clickhandler inside aclickhandler. Every time you click, a new click handler will be added and called on each subsequent click.Click handlers are called with the newest added called first, which means that last, all the images are set to transparent.
If you want the picture you clicked on to be opaque, and the others transparent, try this:
Demo: http://jsfiddle.net/gCsRL/1/
在此代码中：
您将为每次点击一遍又一遍地注册一个点击处理程序。试试这个：
In this code:
you're registering a click handler over and over, for each click. Just try this instead: