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

此处的Codepen：https://codepen.io/anon/pen/gRJEwx

因此，基本上jQuery切换“滑动”会将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>

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

最佳答案

您具有第二个单击事件侦听器，作为对第一个事件的回调。
使它们嵌套，使它们在代码中位于相同的深度：

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

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

关于javascript - jQuery幻灯片切换显示然后消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45175017/