jquery를 사용하는 .blur 함수의 문제점

Question

의 이미지를 확대하고 blur()의 이미지를 축소하는 응용 프로그램이 있습니다. 원본 이미지 크기를 읽은 후 효과가있는 확대/축소 효과를 만들기 위해 15px를 추가했습니다. 문제는 내가 읽은 원본 이미지 크기를 .blur()으로 전달하려고 시도했지만 축소 된 효과가있는 것입니다. 어느 누구도이 문제를 해결할 수 있습니까?

Answer 1

Here is a working demo 다음 코드 중 하나입니다.

첫째, 당신은 당신의 .blur() 기능에 orgW 및 orgH에 $.data() 메소드를 호출되지 않았다. 또한, 나는 작업에 줌을받을하기 위해 당신의 .focus() 기능에 비슷한 구현을 위해 .blur() 기능을 변경했습니다

$('button:has(img)').blur(function() { 

    if (timer !== null) clearTimeout(timer); 

    var $image = $(this).find('img'); 

    $image.each(function() { 
     $(this).animate({ 
      'width': $.data(this, 'orgW') + 'px', 
      'height': $.data(this, 'orgH') + 'px', 
     }, 500); 
    }); 

}); 

Answer 2

또한 애니메이션 기능에 '+=15' 및 '-=15'를 사용할 수 있습니다. 너비와 높이를 저장할 필요가 없습니다.

$('button:has(img)').focus(function() { 
    $(this).find('img').animate({ 
     width: '+=15', 
     height: '+=15' 
    }, 500); 
}); 

$('button:has(img)').blur(function() { 
    $(this).find('img').animate({ 
     'width': '-=15', 
     'height': '-=15' 
    }, 0); 
}); 

Demo

편집

: 지금은 작동합니다.