Question

Dear specialists,

I have a question. I am new to Jquery and I am trying to make use of div animation according to the example code given below. What happens is that while hovering the mouse various times in a short amount over the div the action reproduces itself and causes an usability behavior that I would like to avoid somehow. Is there a way to make the function check on the mouse behavior for example the div hovering in a given amount of time to avoid unwanted multiple activation?
I hope I explained well enough.

Thanks for your input.

$(document).ready(function() {

$("#expand_smoke").hover(
         //on mouseover
          function() {
              $(this).animate({
              height: '+=125' //adds 125px
               }, 'slow' //sets animation speed to slow
              );
           },
         //on mouseout
          function() {
              $(this).stop()
             $(this).animate({
             height: '60' //changes back to 60px
        }, 'slow'
      );
    }
  );

});

Answer 1

Why don’t you just do this?

$("#expand_smoke").hover(
    function() {
        $(this).stop().animate({ height: '200' }, 'slow');
    },
    function() {
        $(this).stop().animate({ height: '60' }, 'slow');
    }
);