jQuery animate() on document.ready

Question

이 예제를 사용하여 사진 확대/축소 효과를 얻으려고합니다 : http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/. 그러나이 효과가 페이지로드 이후가 아니고 이 아니고이 작동해야합니다. 그래서 나는 준비()에 호버()를 변경 :

$(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' 
      }); 
      } 
     ); 
    }); 

그리고 나는 크롬 디버거에서 JS 오류가 있었다 : catch되지 않은 형식 오류 : 연산자 '에서'사용 할 수 없음 정의되지 않은 에서 '디스플레이'를 검색 할 수 있습니다 누군가, 제발,이 문제를 해결하기위한 힌트를 줘?

미리 감사드립니다.

Answer 1

서로 다른 크기와 이미지가있는 경우는 다음과 같이 그것을 할 수

당신이 CSS에서 일부 값을 설정해야

$(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}); 
}); 

:

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