Как скрыть элементы div и показать анимацию gif при нажатии кнопки поиска до загрузки следующей страницы

Question

Я хочу скрыть div, имеющий класс «ToBeHiddenWhenSubmitted», и показать анимацию gif до полной загрузки следующей страницы.

<div class="front-paper" > 
    <div class="container"> 

<form name="frm" method="GET" action="new.php" onsubmit="return validateForm()" > 
    <div class="input-append"> 
<input class="span6 input-custom" type="text" name="search" value="" style="min-width:10px;"><br><br> 


<div class="ToBeHiddenWhenSubmitted"> 
      <select class="btn btn-custom" name="view" id="views" data-native-menu="false" style=" height:42px; width:258px;"> 
     <option value="linkfile">Show Files</option> 
     <option value="links">Show Links</option> 
     </select> 
<button type="submit" value="Search" id="clickme" class="btn btn-custom">Search</button> 
     </div> 


     </div> 
    </form> 

</div> 
</div> 

Answer 1

Это должно быть столь же тривиально, как с помощью .show() и .hide() на ваших целей в пределах существующей validateForm функции.

function validateForm (event) { 
    $('.ToBeHiddenWhenSubmitted').hide(); 
    $('#animated-gif-selector').show(); 
    // whatever you already do in this function 
} 

Если вы задаетесь вопросом, как продолжить анимацию на следующей странице, вы должны сделать это с этой страницы. Чтобы сделать это, скрыть форму или что-то на следующей странице по умолчанию и показать анимированный GIF по умолчанию, а затем добавить ready обработчика, чтобы поменять их видимость:

$(function() { 
    $('#animated-gif-selector').hide(); 
    $('.ToBeShownWhenPageFullyLoads').show(); 
}); 

QA раздел