开发者

Slide effect (jQuery)

开发者 https://www.devze.com 2023-01-21 08:58 出处:网络
I wonder why this isn\'t working as expected: $(function() { $(\".door1-trigger\").click(function() { $(\".door\").hide();

I wonder why this isn't working as expected:

$(function() {

    $(".door1-trigger").click(function() {
      $(".door").hide();
      // $(".door1").show("slide", { direction: "right" }, 1000);
      return false;
    });
    $(".door2-trigger").click(function() {
      $(".door").hid开发者_如何转开发e();
      $(".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

I would like only the main shown initially, clicking on door 1 slides the appropriate container from left, and clicking door 2 slides the door2 container from right.

Many thanks for your help!


There were a few issues here, I had trouble with the fiddle styling for whatever reason, just moved it to jsbin to save time. The first issue is here:

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

This will always be true, since it's not falsy, you need to add a .length on there to see if it found any elements, like this:

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

The other issue is you were hiding it with $(".door").hide(); before checking the visibility, instead move it to the end and don't hide the door you want to show, like this:

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号