javascript - 滑动效果 (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 滑动右边的 door2 容器。

非常感谢您的帮助!

Answer 1

这里有一些问题，无论出于何种原因，我在 fiddle 样式方面遇到了麻烦，只是将其移至 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 .