Question

I would like to have multiple animations fire on mouseover for some navigation buttons. I’d like to specify all of the animations and parameters in a function and have it called for each button whenever the mouse is over JUST that button. So far I can only get it to apply to all instances of the button. I tried using “(this)” in the function, but it doesn’t work.

<script type="text/javascript">
    $(document).ready(function(){
        function navmouseover1() {
            $(this).animate({ left:"+=10",top:"+=10",width:"-=20px",height:"-=20px",opacity:1 },100 );   
        }
        $("#nav1").mouseover(function() { navmouseover1(); });
        $("#nav2").mouseover(function() { navmouseover1(); });
    });

Answer 1

You can use this but you need to bind the event to your function instead of wrapping it in another function. Example:

$('#nav1').mouseover(navmouseover1);

The issue you are having right now is that the “this” variable is being set correctly for the event listener, however, since you then call your function from inside that event listener it has a different scope.