이미지, 이미지 팝업에 Jquery random hover가 있지만 일부는 원래 크기로 복원되지 않습니다.

Question

9 개의 이미지가 3 개의 행으로 배열되어 있습니다. 각 행에는 3 개의 이미지가 있습니다. 모든 이미지의 크기가 다릅니다. 마우스를 올리면 이미지 너비와 높이가 각각 400px와 300px로 증가하고 mouseout에서 원래 크기로 복원됩니다. 이제 문제는 임의로 마우스를 가져 가면 이미지가 팝업되지만 일부는 원래 크기로 돌아 가지 않습니다. 이 문제를 어떻게 해결할 수 있습니까? 도와주세요.

내 코드 :

내가 발견하는 것이 여기에 세 가지 잠재적 인 문제가 실제로있다

jQuery(document).ready(function() { 
     jQuery('my-selector').hover(function() { 
var someVariable = jQuery('my-selector img', this); 
someVariable.attr('actualWidth', someVariable.width()); 
someVariable.attr('actualHeight', someVariable.height()); 
jQuery('my-selector').stop() 
       .animate({ 
       width: "400px",    
       height: "300px" 
      }, 200, function() { 
       // Animation complete. 
       jQuery('show-some-div').show(); 
      }); 
     }, 
function() { 
jQuery('my-selector').stop() 
       .animate({ 
       width: someVariable.attr('actualWidth'),     
       height: someVariable.attr('actualHeight')}, 200, function() { 
       // Animation complete. 
       jQuery('show-some-div').hide(); 
      }); 

Answer 1

.

첫 번째은 이벤트가 발생할 때 사용자의 요소를 모호하게 다시 선택한다는 것입니다. 즉, 이미지 중 하나만 발사하더라도 사용자가 실제로 상호 작용 한 것을 다시 얻으려면 체조를해야하는 등 다양한 작업을하고 있습니다.

jQuery 이벤트 콜백 내에서 문맥 참조 변수 this이 이벤트가 참조하는 html 요소를 가리킨다는 점에서이 문제와 관련하여 도움이 될 수 있습니다. 이 대신

var someVariable = jQuery('my-selector img', this); 

을하고 당신이

var someVariable = jQuery(this); 

을 할 수 있으며 이벤트를 발생시킨 HTML 요소에서 가리키는 jQuery를 개체 수 있습니다 것을 의미한다. 내가 jQuery를 객체는 $로 시작 컨벤션을 유지하려면, 그래서 일반적으로, 당신은 확실히 실제로 mouseover 또는 mouseout 이벤트를 발생시킨 요소에 대한 참조를 가지고 지금에 관계없이를

var $this = $(this); 

그런 짓을 당신의 행동을하는 데 사용할 수 있습니다 (I 지금은 someVariable 고수 것이다) :

someVariable.stop().animate({ ... }); 

두 번째 문제 당신이 HTML 상에 임의의 속성을 보내고 attr을 시작할 때 이러한 종류의 DOM과 일 처리하고 있다는 것입니다 집단. actualWidth은 실제 HTML 속성이 아니며 일부 브라우저는 다른 브라우저보다이 사실을 더 잘 알고 있습니다. 고맙게도 jQuery는 특정 HTML 요소와 관련된 변수를 저장하는 방법을 제공합니다. 단순히 당신이 이미 .attr을 사용하고 .attr 정확히 방법보다는 .data을 사용하고, 당신이 원하는 데이터를 멀리 저장할 수 있습니다 :

someVariable.data('actualWidth', someVariable.width()); // sets actualWidth 
// ... some time later .... 
var someOtherVariable = someVariable.data('actualWidth'); // gets actualWidth 

내가 여기에 볼 수있는 세 번째 문제이다 : 누군가가 올리면 어떻게 될까 요소의 크기가 원래 크기로 돌아 오기 전에 마우스를 다시 켭니다. 이제 다시 actualSize으로 축소되기 전의 이미지를 측정하고 그 이미지는 actualSize입니다.이를 해결하려면 각 이미지가로드 될 때마다 actualSize을 측정하십시오 (이미지가 아직로드되지 않았기 때문에 각 이미지에 load 이벤트를 수행하고 각 이미지는 load 이벤트를 발생시키기 때문에 page load을 수행하지 않으려 고합니다). 가)로드 크기 때 :

jQuery('my-selector img').load(function() 
{ 
    var someVariable = jQuery(this); 
    someVariable.data('actualWidth', someVariable.width()); 
    someVariable.data('actualHeight', someVariable.height()); 
}); 

을 이제 각각의 이미지를 측정하고 진정으로 적절한 크기 무엇인지 오프 저장 했으므로 mouseover에 일을마다 할 필요가 없습니다; 걱정하지 않고 mouseover에서 400x300 크기로 이미지를 확장 한 다음 마우스 아웃 할 때 actualWidth 및 actualHeight의 데이터를 저장합니다.

세 가지 문제 사이에 문제가 발생해야합니다.