jQuery syntax issue on slideOut/In function

Question

I know this is easy, just drawing a blank.

If you look at this page (all JS/CSS is on the one page), http://dl.dropbox.com/u/904456/expander.html

You can see what I have. Basically I would like to do two things differently.

A.) I would only like to show the .module .caption for the .module hovered, not both of them when either is hovered. B.) I would like to slideOut rather then simply .show() and slideIn rather then simply .hide() (on hover and unhover.)

$(document).ready(function() {
  $(".module .caption").hide();
  $(".module").hover(function() {
    $(".module .caption").show(); 
    },function() {
    $(".module .caption").hide();   
  });
});

And my markup looks like:

 <div class="module span-1">
      <div class="inside">HOVER</div><!-- end .inside -->
        <h1>TITLE</h1>
        <div class="caption">
          <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
        </div><!-- end .caption -->
    </div><!-- end .module -->

 <div class="module span-2">
  <div class="caption">
          <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
      </div><!-- end .caption -->
      <div class="inside">HOVER</div><!-- end .inside -->
        <h1>TITLE</h1>
    </div><!-- end. module -->

Would love some assistance! And if your feeling especially generous, an explanation on your method (for next time). Thanks!

Answer 1

By calling $(".module .caption").show(); you are showing all elements with the class caption inside an element with the class module. Instead, you want to use the element in question (the element that has been hovered), which you can reference using $(this). Then, you simply do your toggling however you'd like. See the jQuery effects API for your options. This is one way to get the desired effect:

 $(document).ready(function() {
  $("div.module div.caption").hide();
  $("div.module").hover(function() {
     $(this).find("div.caption").slideDown(); 
   },function() {
     $(this).find("div.caption").slideUp();   
   });
 });

Edit: Rather than using a selector of the form $('.className'), it is generally better to use $('tag.className'), as this selector will use the native Javascript method getElementsByTagName rather than looping over all elements in the DOM looking for ones with the given class.