Javascript 更改除选定图元之外的所有图元的不透明度_Javascript_Jquery_Css_Opacity

Javascript 更改除选定图元之外的所有图元的不透明度

javascript jquery css

Javascript 更改除选定图元之外的所有图元的不透明度,javascript,jquery,css,opacity,Javascript,Jquery,Css,Opacity,我在一个页面上有三个图像，我想淡出没有点击的元素。脚本在第一个实例中工作，因此，如果单击一张图片，其他两张会褪色。如果你认为点击一张已经褪色的图片，那么最后一张未褪色的图片也会褪色，而不是100%不透明度和另外两张褪色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

我在一个页面上有三个图像，我想淡出没有点击的元素。脚本在第一个实例中工作，因此，如果单击一张图片，其他两张会褪色。如果你认为点击一张已经褪色的图片，那么最后一张未褪色的图片也会褪色，而不是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>


无标题文件
.opac{
过滤器：α（不透明度=50）；
-moz不透明度：0.5；
-khtml不透明度：0.5；
不透明度：0.5；
边界：厚；
}
$（文档）.ready（函数（）{
$（'a.images'）。单击（函数（）
{
$（this.sides（）.stop（）.animate（{opacity:0.4}，300）；
$（'a.images'）。单击（函数（）
{
$not（'this'）.stop（）.animate（{opacity:1.0}，300）；
});
});
});
html

在此代码中：

$('a.images').click(function() {
    $(this).siblings().stop().animate({opacity: 0.4}, 300);
    $('a.images').click(function() {
        $not('this').stop().animate({opacity: 1.0}, 300);
    });
});

您正在为每次单击反复注册一个单击处理程序。试试这个：

$('a.images').click(function() {
    $(this).siblings().stop().animate({opacity: 0.4}, 300);
    $(this).stop().animate({opacity: 1.0}, 300);
});

您正在将

单击

处理程序附加到

单击

处理程序中。每次单击时，将添加一个新的单击处理程序，并在每次后续单击时调用该处理程序

单击处理程序使用最新添加的名为first的处理程序进行调用，这意味着最后，所有图像都设置为透明

如果希望单击的图片不透明，而其他图片透明，请尝试以下操作：

$('a.images').click(function(){
    // Make all images (except this) transparent
    $('a.images').not(this).stop().animate({opacity: 0.4}, 300);
    // Make this opaque
    $(this).stop().animate({opacity: 1.0}, 300);
});

演示：

对不起，我不太清楚：）。我确实有这样的代码，但我所寻找的是一次只淡出一个元素。所以，如果你点击图片1，那么2和3会褪色。如果单击3，3将处于完全不透明度，1和2将褪色。对不起，我的意思含糊不清。@dzilla：问题很清楚；这一评论并不清楚。你说“一次只淡入一个元素”，但你说“2和3淡入”。你到底想要什么？我已经在我的答案中添加了一个演示的链接，点击并尝试一下。你知道吗？我脑子里放了个屁。你是对的！：）你不再需要

-khtml-*

规则，它们已经过时了。此外，别忘了在IE@Marcel:you need

-webkit-*

规则中设置

zoom:1

以触发

hasLayout

。@Rocket:根据目前所有基于webkit的浏览器都支持纯

opacity

，所以：不，您也不需要这些。顺便说一句，对于

-moz不透明性，情况也是如此。为什么要使用同级（）
？