jquery-ui 向左滑动第一次不起作用

Question

当我使用 jquery-ui 中的 show() 和 hide() 方法时：

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() 会产生效果。