Jquery .toggle()导致元素在页面加载时淡出

我正在尝试创建一种效果,当您单击某个元素时,它的大小会增加,当它再次单击时,它会回到原始大小.出于某种原因,当我使用 JQuery的切换方法时,它会导致元素(在此示例中为div)在页面加载时缩小.这是一个链接
JSfiddle我创建了： http://jsfiddle.net/6HNkF/,这是我的JavaScript：

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

解决方法

作为点击事件的 toggle在1.8中已弃用.最后在版本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,它适用于1.8版本.