jQuery slide up animate

Question

I have three divs all classed up the same. I want them indervidually slide up when each one is hovered over. Currently they all slide up when one of them has been hovered over.

Heres my code so far: HTML:

  <div class="second-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit eros odio, </p>

</div>

</div>

<div class="main-block">

  <div class="second-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit eros odio, et malesuada ex blandit porta. Praesent nec elit erat.</p>

  </div>

</div>

<div class="main-block">

  <div class="second-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit eros odio, </p>

</div>

</div>

CSS:

.main-block {width: 300px; height:500px; background:red; position:relative; overflow:hidden; float:left; margin-left:20px;}
.second-block{width:300px; height:auto; position:absolute; background:blue;}

jQuery:

  var slideBlock = function(){
  var blockHeight = $(".second-block").height();
  $(".second-block").css({bottom: "-" + blockHeight + "px"}); 

  $(".main-block").mouseover(function(){
    $(".second-block").animate({bottom: "0px"});
  })
  $(".main-block").mouseout(function(){  
    $(".second-block").animate({bottom: "-" + blockHeight + "px"});
  })
 }
 slideBlock();

Answer 1

What you should do is use $(this) to find the element that's currently being moused over. Then you want to find the .second-block that's underneath that. Example:

$(".main-block").mouseover(function(){
    $(this).find(".second-block").animate({bottom: "0px"});
})