Question

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

This snippet works great for my purposes, the only caveat is that I need the .module hover function to simultaneously add a class of “under” to all other “.caption”‘s that are not $this, and then remove them when the hover ends. So basically I don’t want the “module” that is hovered to get the class, I want it to do exactly what I am showing here…sliding .caption up and down on end hover, I just want all other “.caption”s to get the under class when any “.module” is hovered.

Just hitting a dead end with what I have been trying, want to do it in the same function. Any ideas?

Answer 1

Depending on your html structure something like this might do it:

<script type="text/javascript">
 $(document).ready(function() {
  $(".module .caption").hide();
  $(".module").hover(function() {
    $(this)
      .find(".caption").slideDown().end()
      .siblings('.module').children('.caption').addClass('under');

   },function() {
    var $this = $(this);

    $this.find(".caption").slideUp();

    setTimeout(function() { 
      $this
        .siblings('.module').children('.caption').removeClass('under');   
   }, 1000);
 });
</script>