JQuery를 사용하여 모든 방향으로 div를 확장하십시오.

Question

div의 그리드가 있으며 각 세그먼트에 내용이 있습니다 : 일부 텍스트, 그림 및 [x] 버튼이 있습니다. 이 div는 모두 절대 위치로 설정되어 있습니다 (불규칙한 격자이므로 절대 위치로 이동했습니다).

내가 지금하고 싶은 것은 마우스 커서가 그들 위에있을 때 그들을 확장시키고 그리드에서 다른 중복되는 div 위에 놓는 것이다. 나는 이것을 여기에서 할 수 있었다 : http://jsfiddle.net/CvhkM/2833/. 문제는 내가 그것의 초기 위치와 차원 (각각의 div는 자신의 위치와 차원을 가짐)으로 되돌리고 싶고 어떤 이유로 작동하지 않는다는 것이다. (jQuery에서 처음이다.) 아, 그리고 내가 추가 할 수도 있습니다, 어떻게 지역 (사각형 영역)의 외부로 확장하지 않을 수 있습니까?

Answer 1

오버 플로우 문제가 있습니다, 당신은 당신의 CSS에서 수행 할 수 있습니다

$('.div').css('overflow','visible'); 

이 JSFiddle를 참조 추가하십시오. 개인적으로 오버플로 : 숨겨진 또는 오버플로 : 자동, 오버플로 된 콘텐츠가 상자가 맴돌 때까지 숨겨진 상태로 유지됩니다.

코드를 동적으로 만들 수 있도록 코드를 추가했습니다. 호버 애니메이션의 숫자를 자유롭게 조정할 수 있으며, 배율을 조정하면 더 많은 부분을 조정할 수 있습니다. 원래 크기대로 크기 :

var multiplying_factor = 1.5; 
$(function() { 
    $('.div').each(function() { 
     $(this).data('original_position', $(this).offset()); 
     $(this).data('original_width', $(this).width()); 
     $(this).data('original_height', $(this).height()); 

     $(this).hover(function() { 
      $(this).stop().animate({ 
       left : $(this).data('original_position').left - ($(this).data('original_width') * multiplying_factor/4), 
       top : $(this).data('original_position').top - ($(this).data('original_height') * multiplying_factor/4), 
       width : $(this).data('original_width') * multiplying_factor, 
       height : $(this).data('original_height') * multiplying_factor 
      }, 300); 
     },function() { 
      $(this).stop().animate({ 
       left : $(this).data('original_position').left, 
       top : $(this).data('original_position').top, 
       width : $(this).data('original_width'), 
       height : $(this).data('original_height') 
      }, 300); 
     }); 
    }); 

}); ​ 

Answer 2

오버 플로우 문제입니다. 확실히 위에서 언급 한

http://jsfiddle.net/CvhkM/2834/