jQuery幻燈片切換顯示然后消失

Question

此處的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> 

因此，基本上它在第一次就可以正常工作。 但是第二次顯示第二個屏幕，然后立即隱藏。 知道如何讓它滑動然后保持固定狀態，直到按下后退按鈕嗎？

Answer 1

每次單擊#go都將綁定新的#s2 .back click事件。 將其移出click事件。

也請不要.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);
                                });
                            });