Question

Current code:

$(document).ready(function(){
    $('#go').hover(
        function(){ // Change the input image's source when we "roll on"
            $(this).animate({"top": "-=100px"}, 50, "linear", function(){
              $(this).animate({"top": "+=100px"}, 50);
            });
            $(this).attr({ src : '/gfx/go_over.png'});
        }          
    );
});

basically I wanted my button to bounce up and change state, then when it comes back down it would stay on that changed state. On rollover I want the reverse to happen.

Im not sure what I’m doing here since everytime it comes down it hovers and bounces again.

Answer 1

If you pass a single function to .hover() it will be executed on the mouseenter and mouseleave events, if you just want it to happen once when moving over the element, use .mouseenter() directly, like this:

$(function(){
  $('#go').mouseenter(function(){
    $(this).animate({"top": "-=100px"}, 50, "linear", function(){
      $(this).animate({"top": "+=100px"}, 50);
    });
    $(this).attr({ src : '/gfx/go_over.png'});
  });
});