javascript - 幻灯片效果(jQuery)

我不知道为什么这不能按预期进行：

$(function() {

    $(".door1-trigger").click(function() {
      $(".door").hide();
      // $(".door1").show("slide", { direction: "right" }, 1000);
      return false;
    });
    $(".door2-trigger").click(function() {
      $(".door").hide();
      $(".door2").show("slide", { direction: "left" }, 1000);
      return false;
    });
    $(".main-trigger").click(function() {
      $(".door").hide();
      if ($('.door1:visible')) {
          $(".main").show("slide", { direction: "left" }, 1000);
      } else {
          $(".main").show("slide", { direction: "right" }, 1000);
      }
      return false;
    });

});

JSFiddle

我只希望最初显示的main，单击door 1将从左侧滑动适当的容器，单击door 2将从右侧滑动door2容器。

非常感谢您的帮助！

最佳答案

这里有一些问题，无论出于什么原因，我都无法使用小提琴样式，因此将其移至jsbin可以节省时间。第一个问题在这里：

if ($('.door1:visible')) {

这总是正确的，因为它不是虚假的，您需要在该位置添加.length，以查看是否找到了任何元素，例如：

if ($('.door1:visible').length) {

另一个问题是您在检查可见性之前用$(".door").hide();隐藏了它，而是将其移到最后并且不隐藏要显示的门，如下所示：

if ($('.door1:visible').length) {
  $(".main").show("slide", { direction: "left" }, 1000);
} else {
  $(".main").show("slide", { direction: "right" }, 1000);
}
$(".door:not(.main)").hide();

You can test it out here。

关于javascript - 幻灯片效果(jQuery)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4031030/