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

时间:2017-07-18 19:00:00

标签: javascript jquery html css jquery-ui

Codepen:https://codepen.io/anon/pen/gRJEwx

所以基本上jQuery切换' 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>
&#13;
&#13;
&#13;

所以基本上它第一次正常工作。但第二次显示第二个屏幕,然后立即隐藏。知道我怎么能让它滑动然后保持直到按下后退按钮?

2 个答案:

答案 0 :(得分:1)

每次点击#go时,您都会绑定新的.on点击事件。将其移出点击事件。

也请注意$(staticElement).on(event, dynamicElement, callback)是如何运作的。它必须绑定到静态元素,因此它的形式为#go。因此,如果您的$(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); }); });有时会被删除并使用JS添加,那么您提供的表单将无效。

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>
file_put_contents('myxml.xml', file_get_contents('http://website.com/theirxml.xml');

答案 1 :(得分:0)

您有第二个单击事件侦听器作为第一个回调。 将它们统一起来,使它们在代码中处于相同的深度:

Sub replacement_TEST()

    Dim rows As Long, i As Long, n As Long
    Dim acct1 As String
    Dim eqcode As String
    Dim sht As Worksheet, arrFind, arrRepl, m

    Set sht = ActiveSheet
    rows = sht.UsedRange.rows.Count

    'arrays of matching find/replace values
    arrFind = Array("child1in", "wstre2in", "wstrebin", "lrcfbag", "wstpsbst")
    arrRepl = Array("child1", "wstre2lv", "wstrebal", "lrcfbal", "wstpsbal")

    For i = 1 To rows
        acct1 = sht.Cells(i, 1).Value
        eqcode = sht.Cells(i, 4).Value

        If eqcode = "csus" Or eqcode = "mfus" Then
            m = Application.Match(acct1, arrFind, 0) '<< any match ?
            If Not IsError(m) Then
                sht.Cells(i, 1).Value = arrRepl(m - 1) 'm is 1-based...
            End If
        End If
    Next
End Sub