如何将图片选择为锚点以应用jQuery事件 [英] How to select an image into an anchor to apply jQuery events

问题描述

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

I'm trying to fadeOut the images into the a's in my vertical menu when click on h1. but didn't find the way to do it properly. the most far I can get is fadingOut the complete ul but not the specific images. my question is how to do that, which jquery selectors combination can select those images into the anchors. my intention is to fadeOut those images and fadeIn again with other action (event) for example when I do click on other elements in the same structures. You can see my progress here 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的适度意图:

and this is my modest intent using 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);
  }
 );
});

预先感谢大家！

推荐答案

先爬升，然后再降下来.

Climb up, then back down.

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

这始终是瞄准表单的安全模式.

This is always a safe pattern to aim form.

1)从有问题的元素$(this)开始或对其进行缓存以供重新使用var $header = $(this)

1) Start with the element in question $(this) or cache it for re-use var $header = $(this)

2)使用 .closest()

3)使用 .find()

这样，您的代码将更可重用，并且更能抵抗html中的细微更改

This way your code will be more reusable, and more resistant to minor changes in the html

这篇关于如何将图片选择为锚点以应用jQuery事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！