2

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

<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 clicked opacity=0

4

2 回答 2

4

你不需要这么乱的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>

每个事件（在您的情况下单击）都被委托给一个元素，在 JS 中称为target.
适合您的情况的 jQuery 也有一些不错的选择器，.siblings()因为它将针对所有其他元素而不是当前元素。

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

http://jsfiddle.net/Cnjjx/

于 2013-07-23T00:19:40.270 回答
0

你试过使用 CSS 吗？也许有两个类 img.clicked { opacity=1.0; } img.notClicked { opacity=0.0; } 然后使用jQuery来设置类。

于 2013-07-23T00:19:08.843 回答