1

我的网页上有一些元素，我希望当我单击其中一个元素时，其他元素（未单击的元素）的不透明度会发生变化。

这是一个元素的 HTML 代码：

<div class="element hover download" id="_4>
    <div class="front">
        <div class="element-image-front">
            <img src="./Post thumbnail images/raspberryPiboard.JPG"/>
        </div>
    </div>
    <div class="back">
        <a class="link" href="#/portfolio/chicken.html" onclick="gestionClic('compteur11');"><div class="element-image-back">
        <div class="element-image-back">
            <img src="./Post thumbnail images/raspberryPiboard.JPG"/>
        </div>
        </a>
    </div>
</div>

当我单击一个元素时，这就是class="link"被单击的元素。

我试过这个但它不起作用：

$('.link').click(function() {
    $('.element').siblings().stop().animate({opacity: 0.4}, 300);
    $('.link').click(function() {
        $not('.element').stop().animate({opacity: 1.0}, 300);
    });
});
4

1 回答 1

0

第一：清理你的 HTML 元素！

第二：在我的演示中工作

$('.element > img').click(function () {
    $(this).animate({opacity:0.4}).siblings().animate({opacity:1});
});

在你清理你的HTML之后......

<div class="element">
    <img src="{SRC}">
    <img src="{SRC}">
</div>

所以你可以使用.siblings()

演示：http: //jsfiddle.net/l2aelba/nq3CN/

如果你真的想使用你未清理的 HTML，那么就这样做......

$('.element img').click(function () {
     $('.element').find("img").not(this).animate({opacity:1});
    $(this).animate({opacity:0.4});
});

演示：http: //jsfiddle.net/l2aelba/nq3CN/1/

你的例子：

$('.element > .back > .link').click(function () {
    $(this).animate({opacity:1});
    $(this).parents(".element").find(".front > .element-image-front").animate({opacity:0.3});
});

单击另一个：

$('.element > .front > .element-image-front').click(function () {
    $(this).animate({opacity:1});
    $(this).parents(".element").find(".back > .link").animate({opacity:0.3});
});

应该在一个函数中完成，但您的 HTML 不清楚。因此，只需编写 2 个函数即可实现 100% 工作和 100% 绝对焦点元素正确

演示：http: //jsfiddle.net/l2aelba/nq3CN/2/

于 2013-03-26T23:52:14.073 回答