jQuery Syntax Question, pretty easy I think..

Question

Hi all, question:

<script type="text/javascript">
 $(document).ready(function() {
  $(".module .caption").hide();
  $(".module").hover(function() {
     $(this).find(".caption").slideDown(); 
   },function() {
     $(this).find(".caption").slideUp();   
   });
 });
</script>

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

Just add the class to all other captions, and then remove it from the matched caption. At the end of the hover just remove it from all of them.

Answer 2

$(function () {

        $('a').hover(function () {
            $(this).addClass('on');
            $('a:not(.on)').addClass('noton');

        }, function () {
            $(this).removeClass('on');
            $('a:not(.on)').removeClass('noton');

        });
    });

Answer 3

I'm not sure if this will help as i don't know what the "under" class does exactly.

$(".module").hover(function() {
         $(".caption").addClass("under");
         $(this).find(".caption").removeClass("under").slideDown(); 
       },function() {
         $(this).find(".caption").slideUp();
         $(".caption").removeClass("under");   
       });

Answer 4

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>