触发显示/隐藏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）函数来“复位”变焦，并调用它的隐藏功能。