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

尝试隐藏您希望在开头不可见的元素，以便实际执行show动画。例如。在顶部添加：

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

这样对它们运行.show()会产生影响。

jquery-ui向左滑动不能第一次工作

1 个答案: