Блог

У меня есть простой скрипт div , который выводит изображение со страницы через левую границу и вставляет другой с правой границы. Для этих divs есть 3 доступных состояния (классы чтения) .page_container — отображаемые на странице, .page_container_hidden с display: none , margin-left: 100% и .page_container_sliding с display: block , margin-left: 100% . После завершения анимации я изменяю класс выдвинутого div, чтобы он стал скрытым div , и подготавливаю его к скольжению, прежде чем запускать анимацию на нем. Моя проблема в том, что после завершения второй анимации и установки класса div на соответствующий для отображения на page ( .page_container ), скрипт считает, что это div, который необходимо удалить, и выдвигает его. Я пытался $().removeClass().addClass() , но почему addClass() -то работает только то, что приводит к class='one_class another_class' . Как преодолеть эту проблему? Может быть, есть лучший способ переключать отображаемые разделы на странице?

Пожалуйста, посмотрите фрагмент здесь: https://jsfiddle.net/d1o0hxr7/5 /

Пример HTML:

 <div id="first_page_container" class="page_container">
<h3>
placeholder
</h3>
</div>
<div id="second_page_container" class="page_container_hidden">
<h3>
placeholder
</h3>
</div>
<div id="third_page_container" class="page_container_hidden">
<h3>
placeholder
</h3>
</div>

<button class="page_switcher" name="first">
1
</button>
<button class="page_switcher" name="second">
2
</button>
<button class="page_switcher" name="third">
3
</button>
  

Пример CSS:

 .page_container {
    position: relative;
    margin-top: 80px;
    width: 100%;
    background-color: white;
}

.page_container_hidden {
    position: relative;
    margin-top: 80px;
    width: 100%;
    background-color: white;
    display: none;
    margin-left: 100%;
}

.page_container_sliding {
    position: relative;
    margin-top: 80px;
    width: 100%;
    background-color: white;
    margin-left: 100%;
}
  

Пример JS:

 $(document).on('click', '.page_switcher', function () {

    var page_container = $('.page_container:visible')
    var page_container_number = $(this).attr('name')
    var container_id = '#'   page_container_number   '_page_container'

    $(page_container).animate({left : '-=100%'}, 500, function () {
        $(page_container).removeClass('page_container').addClass('page_container_hidden')
        $(container_id).removeClass('page_container_hidden').addClass('page_container_sliding')
        $(container_id).animate({left: '-=100%'}, 500)
        $(container_id).removeClass('page_container_sliding').addClass('page_container')
    })
});
  

Спасибо.