Включите функцию масштабирования на отображаемом/скрытом элементе.

Question

У меня есть функция, которая показывает/скрывает divs на странице. Внутри этих выявленных divs есть изображение и кнопка «закрыть». Я пытаюсь сделать это, чтобы увеличить анимировать вверх/вниз.

У меня есть разумная функция масштабирования, но проблема заключается в том, что масштабирование происходит при загрузке страницы, когда мне нужно, чтобы они срабатывали в раскрытии 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; 
} 

функция Zoom-коробка:

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

Answer 1

Оберните приближать функцию и вызвать ее после того, как div i с. Я пошел вперед и использовал 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 для «сброса» зума и вызвать его в функции укрыть.