0

我有一个在页面上显示/隐藏 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);
    });
4

1 回答 1

0

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

于 2013-07-10T16:44:33.767 回答