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

这是因为动画的异步性质。你必须链接动画以防止它们一次启动。

这种行为是因为您只是一次执行两个动画。

你必须

开始隐藏
等待隐藏到结束
开始展示

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" });
    });
});

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

1 个答案:

解决方案