gpt4 book ai didi

jquery - 删除所有图像的不透明度,但使用 jquery 单击

转载 作者:太空宇宙 更新时间:2023-11-04 15:27:53 24 4
gpt4 key购买 nike

如何去除所有未被点击的元素的不透明度。我有一组网格图案的图像。我希望能够单击其中的任何一个以使其余部分消失。我现在可以做到,但我想让它更有活力。

<script>
$(document).ready(function() {
$('#grid').click(function() {
$('#book').animate({
opacity: '0'.
}, 1500, function() {
});
});
});
</script>

</head><body>

<div class="portfolio">
<ul id="grid">
<li><a href="#"id="book"><img src="1.jpg"></a></li>
<li><a href="#"id="book1"><img src="2.jpg"></a></li>
<li><a href="#"id="book2"><img src="3.jpg"></a></li>
<li><a href="#"id="book3"><img src="4.jpg"></a></li>
<li><a href="#"id="book4"><img src="5.jpg"></a></li>
<li><a href="#"id="book5"><img src="6.jpg"></a></li>
<li><a href="#"id="book6"><img src="7.jpg"></a></li>
<li><a href="#"id="book7"><img src="8.jpg"></a></li>
<li><a href="#"id="book8"><img src="9.jpg"></a></li>
</ul></div>

我在想,如果id不包含被点击的id opacity=0

最佳答案

您不需要如此困惑的 ID,保持简单。

<div class="portfolio">
<ul id="grid">
<li><a href="#"><img src="1.jpg"></a></li>
<li><a href="#"><img src="2.jpg"></a></li>
<li><a href="#"><img src="3.jpg"></a></li>
<li><a href="#"><img src="4.jpg"></a></li>
<li><a href="#"><img src="5.jpg"></a></li>
<li><a href="#"><img src="6.jpg"></a></li>
<li><a href="#"><img src="7.jpg"></a></li>
<li><a href="#"><img src="8.jpg"></a></li>
<li><a href="#"><img src="9.jpg"></a></li>
</ul>
</div>

每个事件(在您的案例中是单击)都被委托(delegate)给一个元素,在 JS 中称为 target
对于您的情况,jQuery 也有一些不错的选择器,如 .siblings(),它将针对所有其他元素,而不是当前元素。

$(function() { 
$('#grid li').click(function() {
$(this).siblings().animate({opacity: '0'}, 1500);
});
});

http://jsfiddle.net/Cnjjx/

关于jquery - 删除所有图像的不透明度,但使用 jquery 单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17799476/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com