slideToggle on multiple elements causes jumpy animation in FF

slideToggle on multiple elements causes jumpy animation in FF

When I click on the image, a small panel slides up to display information. Problem is, when I have multiple sliders on the same page, the animation gets very jumpy in Firefox, but seems fine in all other browsers (haven't tested in IE).

I'm using the following code:       

  1. $(document).ready(function(){
  2.       $('.image').click(function() {
  3.             var slide = $(this).next('.slider');
  4.             $(slide).slideToggle();
  5.       });
  6.        $('.slider').click(function() {
  7.             $(this).slideToggle();
  8.        });
  9.  });

  1. .slideBox { height: 350px; width: 350px; text-align: center;  position: relative; cursor: pointer; float: left; margin: 30px; }
  2. .image { height: 350px; width: 350px; }
  3. .slider { position: absolute; bottom: 0; height: 175px; width: 350px; background: url('1pxblack.png'); display: none;}
  4. .sliderContent{color: #fff; padding: 20px; width: 350px;}
  1. <div class="slideBox">
  2.       <div class="image"><img src="theimageurl" height="350" width="350"/></div>
  3.       <div class="slider">
  4.             <div class="sliderContent">
  5.                   <div class="someText">Some text. Blah Blah Blah.</div>
  6.             </div>
  7.       </div>
  8. </div>