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