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 时，您都会绑定新的#s2 .back 单击事件。将其移出点击事件。

另外请注意.on 的工作方式。它必须绑定到静态元素，所以它的形式是$(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>

Answer 2

你有第二个点击事件监听器作为第一个的回调。 取消嵌套，使它们在代码中处于相同的深度：

$('#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);
                                });
                            });