代码之家  ›  专栏  ›  技术社区  ›  eozzy

幻灯片效果(jquery)

  •  1
  • eozzy  · 技术社区  · 14 年前

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

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

    非常感谢你的帮助!

    1 回复  |  直到 14 年前
        1
  •  4
  •   Nick Craver    14 年前

    这里有一些问题,无论出于什么原因,我在处理小提琴样式时遇到了困难,只是将它移到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 .