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

将缩放功能包裹在一个功能中并在显示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函数来“重置”缩放并在隐藏功能中调用它。

在显示/隐藏的div上触发缩放功能。

1 个答案: