觸發顯示/隱藏div的縮放功能。

Question

我有一個功能，顯示/隱藏divs在頁面上。在這些顯示的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

包裝你放大功能後調用它div我被揭露。我已經開始使用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）函數來「復位」變焦，並調用它的隱藏功能。