Question

我开始编写一些我计划在多步表单上使用的jquery。它可以工作，但转换是微不足道的。

如果我只是在1＆amp;之间来回走动2然后似乎没问题，但如果我去1-3，那么反过来它没有按预期工作。有时候点击没有注册，这一切似乎都没有计时。

这里有什么更好的方法可以使这看起来一致？

＆＃13;

$(function() {
  $('.next-form').click(function() {

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    $(current_fs).animate({
      opacity: 0
    }, "fast", function() {
      $(this).hide();
    });
    $(next_fs).css({
      position: 'absolute',
      left: '100%',
      top: 0
    });

    $(next_fs).show(function() {
      $(this).animate({
        left: 0
      })
    });

  });

  $('.previous-form').click(function() {

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    $(current_fs).animate({
      left: '100%'
    }, function() {
      $(this).hide();
    });
    $(previous_fs).show(function() {
      $(this).animate({
        opacity: 100
      }, 2000);
    })

  });

});

＆＃13;

.outer{
  position: relative;
  width: 500px;
  height: 50px;
  overflow: hidden;
}
.one{
  width: 500px;
  background-color: #000;
  height: 50px;
}
.two{
  width: 500px;
  background-color: blue;
  height: 50px;
  display: none;
}
.three{
  width: 500px;
  background-color: red;
  height: 50px;
  display: none;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="outer">
<div class="one">
  
  <button type="button" class="next-form" >Next</button>
</div>
<div class="two">
  <button type="button" class="previous-form" >Previous</button>
  <button type="button" class="next-form" >Next</button></div>
<div class="three"><button type="button" class="previous-form">Previous</button></div>
</div>

＆＃13;

Answer 1

我通过添加stop()

来修复它

$(function() {
  $('.next-form').click(function() {

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    $(current_fs).stop();
    $(next_fs).stop();

    $(current_fs).animate({
      opacity: 0
    }, "fast", function() {
      $(this).hide();
    });
    $(next_fs).css({
      position: 'absolute',
      left: '100%',
      top: 0
    });

    $(next_fs).show(function() {
      $(this).animate({
        left: 0
      })
    });

  });

  $('.previous-form').click(function() {

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    $(current_fs).stop();
    $(next_fs).stop();

    $(current_fs).animate({
      left: '100%'
    }, function() {
      $(this).hide();
    });
    $(previous_fs).show(function() {
      $(this).animate({
        opacity: 100
      }, 2000);
    })

  });

});

在元素之间平滑过渡

1 个答案: