jQuery animate（）on document.ready

我试图用这个例子实现照片缩放效果：http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/。但是，我需要使页面加载后，而不是在悬停工作。所以我改变了悬停（）来准备（）：jQuery animate（）on document.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错误：遗漏的类型错误：“在”运营商不能使用未定义搜索“显示”莫非有人请给我一个提示来解决这个问题？

在此先感谢。

来源

2013-02-05 Sergey Stetsurin

这将有助于创造一个小提琴 – bpoiss

我不认为'ready'事件可以安全地绑定到除'document'外的任何东西。尝试绑定到'load'（而使用单个处理程序，只有'hover'支持两个处理程序）。 –

你能做到这样，如果你有不同的尺寸的图像

$(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*/ 
}

来源

2013-02-05 17:19:08 razzak

非常感谢。有效。再一次，谢谢。 –

jQuery animate（）on document.ready

回答

相关问题