javascript - 如何使用 jQuery 动画显示/隐藏幻灯片效果？

Question

我正在做一个简单的步骤页面，想添加一个幻灯片效果。我的问题是效果幻灯片的奇怪行为。应该进入的 div 在必须出来的 div 下显示了片刻。我尝试处理延迟和执行时间，但未能解决。

HTML

<fieldset>
   <div id="one"></div>
   <br />
   <a class="next">next</a>    
</fieldset>
<fieldset>
   <div id="two"></div>
   <br />
   <a class="prev">prev</a>
   <a class="next">next</a>    
</fieldset>
<fieldset>
   <div id="three"></div>
   <br />
   <a class="prev">prev</a>
</fieldset>

JS

$(".next").click(function(){
  current_fs = $(this).parent();
  next_fs = $(this).parent().next();
  //show the next fieldset
  next_fs.show("slide", { direction: "left" }, 0);
  current_fs.hide("slide", { direction: "right" }, 0);
});

$(".prev").click(function(){
  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();
  //show the previous fieldset
  previous_fs.show("slide", { direction: "right" }, 0);
  current_fs.hide("slide", { direction: "left" }, 0);
});

JSFIDDLE

我该怎么办？谢谢

Answer 1

这是因为动画的异步特性。您必须链接动画以防止它们同时启动。

出现这种行为是因为您只是同时执行两个动画。

你必须

1. 开始隐藏
2. 等待隐藏结束
3. 开始展示

See my updated fiddle

Refer to: jQuery Documentation

解决方案

$(".next").click(function(){
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    next_fs.hide(); // this fixes your css
    current_fs.hide("slide", { direction: "right" }, function() {
        next_fs.show("slide", { direction: "left" });
    });
});

$(".prev").click(function(){
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    current_fs.hide("slide", { direction: "left" }, function() {
        previous_fs.show("slide", { direction: "right" });
    });
});