CODEWITHSUNDEEP
jquerytraversal
Emilio Yero
Emilio Yero

Reputation: 127

How to select an image into an anchor to apply jQuery events

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

this is my structure:

<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>

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);
  }
 );
});

thanks in advance guys!!!

Upvotes: 0

Views: 390

Answers (2)

Sinetheta
Sinetheta

Reputation: 9429

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) Start with the element in question $(this) or cache it for re-use var $header = $(this)

2) Traverse to the "group container" using .closest()

3) Drill back down to the elements of interest using .find()

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

Upvotes: 2

bfavaretto
bfavaretto

Reputation: 71918

The img elements aren't children of the ul (they're deeper descendants), that's why your current code isn't working. Try:

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

Upvotes: 2

Related Questions