Как заменить полный полный вид div на другой div без перемещения страницы с помощью JQuery

Question

Привет всем Я столкнулся с проблемой при замене содержимого одного div полностью на другой div. Вот моя структура ДИВ ниже

<div class="tab-pane active" id="events"> 

    <div class="events-info" style="display:none;"> 

     <div class="tab-info"> 

      <div class="bat-chat"><a href="javascript:OpenGallery();" class="btn btn-warning">Bat &amp; Chat Gallery</a></div> 

     </div> 

    </div> 

    <div class="bat-chat-gal" style="position:relative;"> 

Если вы видите выше них там две дивы с именами классов events-info и bat-chat-gal. Теперь то, что я пытаюсь сделать, - это нажать кнопку «Bat & Chat gallery» в events-info класс, который я вызываю под функцией javascript под названием OpenGallery(), а код для этого ниже. В функции OpenGallery я исчезаю events-info класс и исчезает в bat-chat-gal там же. Здесь возникает моя проблема, пытаясь исчезнуть во втором div, это первый запуск в конце первого div, а затем он приближается. Таким образом, это похоже на движение страницы. Как заменить, не делая этого, используя некоторую анимацию.

function OpenGallery() 
{ 
    $('.events-info').fadeOut(); 
    $('.bat-chat-gal').fadeIn(3000); 
} 

Answer 1

вам нужно написать функцию, как показано ниже

function OpenGallery() 
{ 
    $('.events-info').fadeOut(function(){ 
     $('.bat-chat-gal').fadeIn(); 
    }); 

} 

Answer 2

когда не хотят анимации затем просто использовать show и hide

$('.events-info').hide(); 
$('.bat-chat-gal').show(3000);