Jquery .toggle() causing element to fade out on page load

Question

I'm trying to create an effect where when you click on an element it's size increases and when it's clicked again it goes back to the original size. For some reason when I'm using JQuery's toggle method it is causing the element (in this example a div) to shrink when the page loads. Here's a link to a JSFiddle I created: http://jsfiddle.net/6HNkF/ and here's my JavaScript:

    $(document).ready(function(){
        $('#mainImg').toggle(
            function(){
                $('#mainImg').animate({
                    width: '1000',
                    height: '1000'
                }, 500);
            },
            function(){
                $('#mainImg').animate({
                    width: '100',
                    height: '100'
                }, 500);
            }
        );
    });

Answer 1

toggle as a click event was deprecated in 1.8. and finally removed in version 1.9.

.toggle(function, function, ... ) removed

This is the "click an element to run the specified functions" signature of .toggle(). It should not be confused with the "change the visibility of an element" of .toggle() which is not deprecated. The former is being removed to reduce confusion and improve the potential for modularity in the library. The jQuery Migrate plugin can be used to restore the functionality.

As you can see, it works with version 1.8.