jQuery animate() on document.ready答案

【问题标题】：jQuery animate() on document.readyjQuery animate() on document.ready
【发布时间】：2013-02-05 13:01:40
【问题描述】：

我正在尝试使用此示例实现照片缩放效果：http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/。但是，我需要在 页面加载之后，而不是在 hover 时使这个效果生效。于是我把 hover() 改成了 ready()：

    $(function() {
        $('#container img').ready(
            function(){
              var $this = $(this);
              $this.stop().animate({
                  'opacity':'1.0',
                  'height':'200px',
                  'top':'0px',
                  'left':'0px'
              });
           },
           function(){
             var $this = $(this);
             $this.stop().animate({
              'opacity':'0.5',
              'height':'500px',
              'top':'-66.5px',
              'left':'-150px'
             });
           }
        );
    });

然后我在 Chrome 调试器中遇到了 JS 错误：未捕获的类型错误：无法使用“in”运算符在未定义中搜索“显示” 有人可以给我一个提示来解决这个问题吗？

提前致谢。

【问题讨论】：

创建小提琴会很有帮助
我不认为ready 事件可以安全地绑定到除document 之外的任何东西。尝试绑定到load（并使用单个处理程序，只有hover 支持两个处理程序）。

标签： jquery jquery-animate jquery-hover document-ready

【解决方案1】：

如果你有不同尺寸的图片，你可以这样做

$(document).ready( function(){
    img = $('#container img');
    imageWidth = img.outerWidth();
    imageHeight = img.outerHeight();
    centerX = (200 - imageWidth) / 2;
    centerY = (200 - imageHeight) /4;
    img.css({'opacity': 0.5, 'top': centerY, 'left': centerX})
       .animate({'opacity': 1,'height': '200px', 'top': 0, 'left': 0});
});

你需要在 CSS 中设置一些值：

#container {
      width: 200px;
      height: 200px;
      overflow: hidden; /*important*/
}
#container img{
    position: relative; /*important*/
}

【讨论】：