범위 바깥 쪽 이미지의 너비/높이 가져 오기

Question

나는 이미지를 향상시키는 마우스 오버 효과가 있으며 마우스 아웃시 이미지를 원래 크기로 다시 조정합니다. 비록이

$("div.elby_product_thumb img").mouseover(function() { 
    var originalHeight = $(this).width(); 
    var originalWidth = $(this).height(); 

    $(this).css('border','2px solid #f2f2f2'); 
    $(this).css('z-index','500'); 
    $(this).stop().animate({ 
     "top": "-50px", 
     "left": "-50px", 
     "width": "200px", 
     "height": "200px" 
    }, 200); 
}).mouseout(function(){ 
    $(this).css('border','none'); 
    $(this).css('z-index','1'); 
    $(this).stop().animate({ 
     "top": "0px", 
     "left": "0px", 
     "width": originalWidth + "px", 
     "height": originalHeight + "px" 
    }, 200); 
}); 

는 핸들러로 마우스 기능의 범위에 있지 Uncaught ReferenceError: originalWidth is not definedoriginalWidth/Height 때문에 초래한다.

아이디어가 있으십니까? mouseover 및 mouseout의

Answer 1

선언 변수 아웃 사이드는 글로벌하고 mouseover

var originalHeight; 
var originalWidth; 

$("div.elby_product_thumb img").mouseover(function(){ 
   originalHeight = $(this).width(); 
    originalWidth = $(this).height(); 
     $(this).css('border','2px solid #f2f2f2'); 
        $(this).css('z-index','500'); 
        $(this).stop().animate({ 
            "top": "-50px", 
            "left": "-50px", 
            "width": "200px", 
            "height": "200px" 
            }, 200); 
}).mouseout(function(){ 
        $(this).css('border','none'); 
        $(this).css('z-index','1'); 
        $(this).stop().animate({ 
            "top": "0px", 
            "left": "0px", 
            "width": originalWidth + "px", 
            "height": originalHeight + "px" 
        }, 200); 
}); 

편집에서 값을 할당합니다 :을 당신이 그들을 전체 글로벌하게 윈도우 범위에서 변수를 선언 할 필요가없는 경우 @roasted가 제안 된대로 양쪽 이벤트에 대해 엔클로저를 만들 수 있습니다.

(function(){ 
    var originalHeight; 
    var originalWidth; 

    $("div.elby_product_thumb img").mouseover(function(){ 
    //your code 
    }).mouseout(function(){ 
    //your code 
    }); 
})(); 

Answer 2

먼저 data 매개 변수를 사용하여 원본 크기를 저장할 수 있습니다. 마우스를 두었을 함수 외부 을

$("div.elby_product_thumb img").mouseover(function() { 
    var $el = $(this); 
    $el 
     .data('originalHeight', $el.height()) 
     .data('originalWidth', $el.width()) 
     .css({ 
      'border': '2px solid #f2f2f2', 
      'z-index': '500' 
     }) 
     .stop().animate({ 
      "top": "-50px", 
      "left": "-50px", 
      "width": "200px", 
      "height": "200px" 
     }, 200); 
}).mouseout(function() { 
    var $el = $(this); 
    $el 
     .css({ 
      'border': 'none', 
      'z-index': '1' 
     }) 
     .stop().animate({ 
      "top": "0px", 
      "left": "0px", 
      "width": $(el).data('originalWidth') + "px", 
      "height": $(el).data('originalHeight') + "px" 
     }, 200); 
}); 

Answer 3

을 난 당신이 단순히 "originalHeight을"이 두 변수를 정의 할 수 있습니다 생각한다 "originalWidth"둘째, 당신은 선택을 캐시 할 수와 같은, 당신이 그것에하게 호출 수를 줄일 수 있습니다. 그런 다음 "mouseover"및 "mouseout"에서이 두 이벤트에 대해 전역 적으로 사용할 수 있습니다.