표시/숨기기중인 div에서 확대/축소 기능을 트리거합니다.

Question

페이지에 div를 표시하거나 숨기는 기능이 있습니다. 이 공개 된 div 내에서 이미지와 '닫기'버튼이 있습니다. 확대/축소를 위/아래로 줌하려고합니다.

합리적인 확대/축소 기능이 있지만 문제는 페이지 노출시 모든 항목이 확대되어 div 표시에 트리거해야하는 경우입니다. 내가 가진 코드로 달성하기 위해해야 ​​할 일에 대한 제안 (또는 더 나은 방법 제시)은 인정 될 것입니다.

감사

HTML

<div class="box1" id="box1ID" style="display:none;"> 
    <div class="page_image_wrapper"> 
    <!--<img src="images/1.png" width="1080" height="1920">--> 
    <div id="zoom-box"> 
<img src="images/13.png" width="1080" height="1920" /> 
</div> 
    </div> 
    <div class="close_box"> 
    <a href="#" name="1" onclick="conceal('box1ID');"> 
    <img src="images/transparent.png" width="100" height="100"> 
    </a> 
    </div> 
    </div> 

표시/감추고 기능

function conceal(boxId) {  
     if(document.getElementById(boxId).style.display=='block') { 
      document.getElementById(boxId).style.display='none'; 
     } 
     return false; 
    } 

function show(boxId) { 
    if(document.getElementById(boxId).style.display=='none') { 
     document.getElementById(boxId).style.display='block'; 
    } 
    return false; 
} 

줌 박스 기능 :

$(document).ready(function() { 
$('#zoom-box').animate({ 
    width:'1080px', 
    height:'1920px', 
    top:'0', 
    left:'0', 
    'font-size':'50px', 
    'line-height':'300px' 
}, 1000); 
    }); 

Answer 1

함수에서 줌을 싸서 후 전화 사업부 들었다. 나는 계속 나아가서 jQuery를 쇼에 사용했고 이미 줌을 위해 그것을 사용하고 있기 때문에 함수를 감추고있다.

$(document).ready(function() { 
    function zoomIn() { 
     $('#zoom-box').animate({ 
      width:'1080px', 
      height:'1920px', 
      top:'0', 
      left:'0', 
      'font-size':'50px', 
      'line-height':'300px' 
     }, 1000); 
    } 
    function conceal(boxId) { 
     $('#' + boxId).hide(); 
     // You could potentially create a zoomOut function and call it here to 'reset' the zoom 
     // zoomOut(); 
    } 
    function show(boxId) { 
     $('#' + boxId).show(); 
     // Call your zoom function here 
     zoomIn(); 
    } 
}); 

주석에서 언급했듯이 확대/축소를 '재설정'하고 숨김 기능에서 호출하는 zoomOut 함수를 만들 수도 있습니다.