javascript - jQuery 幻灯片切换显示然后消失

Question

代码笔在这里:https://codepen.io/anon/pen/gRJEwx

所以基本上 jQuery toggle 'slide' 将 div 滑入然后立即退出。它只会在您按下按钮时每隔一秒或三次发生。它从未在第一次尝试时发生，但在单击后退按钮后似乎在第二次或第三次尝试时发生。

$('#go').on('click', function() {
  $('#s1').fadeOut('slow', function() {
    $('#s2').toggle('slide', {
      direction: 'right'
    }, 800, function() {

      $('#s2 .back').on('click', function() {
        $('#s2').fadeOut('slow', function() {
          $('#s1').toggle('slide', {
            direction: 'right'
          }, 800);
        });
      });
    });
  });
});

body {
  overflow: hidden;
  width: 400px;
  background: gray;
  height: 400px;
}

#s1,
#s2 {
  width: 100%;
  height: 100%;
}

#s1 {
  padding: 20px;
  display: block;
  background: purple;
}

#s2 {
  padding: 20px;
  display: none;
  background: blue;
}

#s3 {
  display: none;
  background: black;
}

#go,
#go2 {
  width: 400px;
  padding: 10px 0;
  margin: 20px auto;
  text-align: center;
  font-weight: bold;
  background: white;
}

.back {
  background: white;
  font-weight: bold;
  width: 300px;
  padding: 10px 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s1">
  <div id="go">GO TO SCREEN2</div>
</div>
<div id="s2">
  <div class="back">GO BACK</div>
</div>

所以基本上它第一次就可以正常工作。但是第二次它显示第二个屏幕然后立即隐藏。知道如何让它滑动然后保持不动直到按下后退按钮吗？

Answer 1

每次点击 #go 时，您都绑定(bind)了新的 #s2 .back 点击事件。将其移出点击事件。

另外请注意 .on 是如何工作的。它必须绑定(bind)到静态元素，所以它的形式是$(staticElement).on(event, dynamicElement, callback)。因此，如果您的 #go 有一段时间将被删除并使用 JS 添加，那么您提供的表单将不起作用。

$(document).on('click', '#go', function() {
  $('#s1').fadeOut('slow', function() {
    $('#s2').toggle('slide', {
      direction: 'right'
    }, 800);
  });
});


$(document).on('click', '#s2 .back', function() {
  $('#s2').fadeOut('slow', function() {
    $('#s1').toggle('slide', {
      direction: 'right'
    }, 800);
  });
});

body {
  overflow: hidden;
  width: 400px;
  background: gray;
  height: 400px;
}

#s1,
#s2 {
  width: 100%;
  height: 100%;
}

#s1 {
  padding: 20px;
  display: block;
  background: purple;
}

#s2 {
  padding: 20px;
  display: none;
  background: blue;
}

#s3 {
  display: none;
  background: black;
}

#go,
#go2 {
  width: 400px;
  padding: 10px 0;
  margin: 20px auto;
  text-align: center;
  font-weight: bold;
  background: white;
}

.back {
  background: white;
  font-weight: bold;
  width: 300px;
  padding: 10px 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="s1">
  <div id="go">GO TO SCREEN2</div>
</div>
<div id="s2">
  <div class="back">GO BACK</div>
</div>