Question

I am used to using this syntax :

<script type="text/javascript">
   $(document).ready(function(){
      $("button").click(function(){
           $("p").hide(1000,function(){
               alert("The paragraph is now hidden");
           });
      });
   });
</script>

but just lately I came across this one which works as well,

<script type="text/javascript">
    $(document).ready(function(){
        $("a").hover(function(){
            $(this).stop().animate({ color: '#a6d13b'}, "normal");
        }, function() {
            $(this).stop().animate({ color: '#000000'}, "normal"); //original color
        });
    });
</script>

I’m just new to jquery and would really appreciate some help. why does the second syntax work ? even though its outside the animate function. ?

Answer 1

The two scripts are doing completely different things, but (just guessing here) I think what is confusing you is that in the second script the .hover() function takes two callbacks as parameters, one for mouseenter and one for mouseleave, like this:

$("a").hover(callbackFunctionOne, callbackFunction2);
// OR
$("a").hover(function() { ... }, function() { ... });

In your example it is within these two functions passed to .hover() that the .animate() calls occur, but the .animate() calls themselves don’t (in this case) have callbacks.

EDIT: Now that dknaack has edited your code to indent it properly it is more obvious that the .animate() calls are inside the two functions. When it wasn’t indented it was much harder to see what belonged to what.

Note that .animate() (and many, many other jQuery functions) can take a callback, but this is optional.