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

幻灯片效果(jquery)

jquery javascript

eozzy · 技术社区 · 15 年前

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

$(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 回复 | 直到 15 年前

Nick Craver 15 年前

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