JQuery-UI слайд слева не работает в первый раз

Question

Когда я использую шоу() и скрыть() методы из Jquery-интерфейса:

var current = 1; 
function slide(buttonNum) { 
    if (current != buttonNum){ 
     $("#page" + current).hide("slide", { direction: "left" }, 800, function() { 
     $("#page" + buttonNum).show("slide", { direction: "right" }, 800); 
     }); 
     current = buttonNum; 
    } 
} 

Моя цель в том, что каждая кнопка времени нажата для этого функции, страница будет прокручиваться влево, чтобы перейти на требуемую страницу.

Проблема в том, что она не работает в первый раз. Я нажимаю номер страницы с функцией выше (текущий div будет скользить влево, но div, который я изменяю, просто появляется без анимации), но работает нормально другое раз.

мой CSS выглядит следующим образом:

.slider { 
     width: 400px; 
     height: 300px; 
     overflow: hidden; 
    } 
    .slider .content { 
     position: relative; 

    } 
    .slider .content .page { 
     float: left; 
     width: 400px; 
     height: 300px; 
     background-size: cover; 

    } 

и HTML:

<div class="slider"> 
<div class="content"> 
    <div id='page1' class="page"> 
     <!-- stuff --> 
    </div> 
    <div id='page2' class="page"> 
     <!-- stuff --> 
    </div> 
    <div id='page3' class="page"> 
     <!-- stuff --> 
    </div> 
</div> 
</div> 

<a onclick='slide(1)' href="#">1</a> 
<a onclick='slide(2)' href='#'>2</a> 

Answer 1

Скройте элементы, которые вы ожидаете, чтобы не быть видны в самом начале, так что шоу анимация будет фактически выполнять , Например. добавьте это в верхней части:

$("#page2").hide(); 
$("#page3").hide(); 

Таким образом работает .show() на них будет иметь эффект.