Question

当我点击h1时，我正试图将图像淡入我的垂直菜单中的a。但没有找到正确的方法。我能得到的最远的是褪色，但不是特定的图像。我的问题是如何做到这一点，哪个jquery选择器组合可以选择那些图像进入锚点。我的意图是淡化那些图像并再次使用其他动作（事件）淡出，例如当我点击相同结构中的其他元素时。您可以在这里查看我的进展www.miramarlab.com/index222.htm

这是我的结构：

<div id="slider4" class="trans">
 <h1>SERVICES</h1>
  <p class="description">DESCRIPTION</p>
  <a class="buttons prev" href="#">left</a>
  <div class="viewport">
   <ul class="overview">
    <li> <a href="#" rel="q1"><img src="_images/serv_1.jpg"><p> SERVICE 1 </p></a></li>
    <li> <a href="#" rel="q2"><img src="_images/serv_2.jpg"><p> SERVICE 2 </p></a></li>
    <li> <a href="#" rel="q3"><img src="_images/serv_3.jpg"><p> SERVICE 3 </p></a></li>
    <li> <a href="#" rel="q4"><img src="_images/serv_4.jpg"><p> SERVICE 4 </p></a></li>
    <li> <a href="#" rel="q5"><img src="_images/serv_5.jpg"><p> SERVICE 5 </p></a></li>
    <li> <a href="#" rel="q6"><img src="_images/serv_6.jpg"><p> SERVICE 6 </p></a></li>
   </ul>
  </div>
  <a class="buttons next" href="#">right</a>
</div>

这是我使用jquery的适度意图：

$(function() {
 $('#categories h1').click(
  function () {
   $(this).removeClass('hover').addClass('active');
   $('#categories h1').not(this).removeClass('active').addClass('normal');
   $(this).parents('div:eq(1)').stop().animate({'width':'488px'},500);
   $(this).next().stop(true,true).slideDown(500);

   // thi is my intent ;)
   $(this).siblings().children('img').stop(true,true).fadeOut(500);

   var siblings = $(this).parents('div:eq(1)').siblings()
   siblings.stop().animate({'width':'152px'},500);
   $('.description',siblings).stop(true,true).slideUp(500);
  }
 );
});

先谢谢你们！

Answer 1

img元素不是ul的子元素（它们是更深层次的后代），这就是您当前代码无效的原因。尝试：

$(this).siblings().find('li img').stop(true,true).fadeOut(500);

Answer 2

爬上去，然后退下来。

$(this).closest('.trans').find('img').stop(true,true).fadeOut(500);

这始终是一种瞄准形式的安全模式。

1）从问题$(this)开始，或者将其缓存以便重复使用var $header = $(this)

2）使用.closest()

遍历“群组容器”

3）使用.find()

深入查看感兴趣的元素

这样，您的代码将更具可重用性，并且更能抵御html中的微小更改

如何选择图像到锚中以应用jQuery事件

2 个答案: