幻灯片效果（jQuery）

Question

我想知道为什么这不能按预期工作：

$(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从右侧滑动门door 2容器。

非常感谢您的帮助！

Answer 1

这里有一些问题，无论出于何种原因我都无法使用小提琴样式，只是将其移动到jsbin以节省时间。 第一个问题在这里：

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

这将永远是真的，因为它不是假的，你需要在那里添加一个.length来查看它是否找到了任何元素，如下所示：

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

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

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

你可以在这里测试一下 。