重复

时间：2016-10-01 05:19:26

标签： jquery animate.css

我正在使用类似于测验的网站工作，我使用 animate.css 和 jquery 实现了一个简单的滑块效果来导航通过这些步骤，问题是在测验中，当用户到达＆＃34;滑块时的最后一项＆＃34; （这是结果），有一个按钮，所以他可以重新开始，但在我的代码中，当你点击重复按钮，当你再次到达最后一步，它再次跳到第一个，就像你点击了重复按钮。

我写了一个片段，你可以看到问题，重现它，你需要：

  1. 点击＆＃34; next＆＃34;直到你到达最后一个项目，在这种情况下，第四个
  2. 点击＆＃34;返回开始＆＃34;按钮
  3. 再次点击下一步，当您到达第三个时，如果您点击＆＃34;下一个＆＃34;转到第四个，它转到第四个，然后它再次消失到第一个，好像你点击了＆＃34;回到开始＆＃34;按钮

    4. ＆＃13;
    ＆＃13; 
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$.fn.extend({
	animateCss: function(animationName) {
		this.addClass('animated ' + animationName).one(animationEnd, function() {
			$(this).removeClass('animated ' + animationName);
		});
	}
});

$('.btn:not(.-back)').click(function(){
	var $currentItem = $(this).closest('.item');
  var nextItemNumber = $currentItem.data('item') + 1;
  var $nextItem = $('.item[data-item="'+nextItemNumber+'"]');
  $currentItem.animateCss('fadeOutLeft');
  $currentItem.one(animationEnd, function(){
  	$currentItem.removeClass('-active');
    $nextItem.addClass('-active');
    $nextItem.animateCss('fadeInRight');
  })
})
$('.btn.-back').click(function(){
	var $currentItem = $(this).closest('.item');
  var nextItemNumber = 1;
  var $nextItem = $('.item[data-item="'+nextItemNumber+'"]');
  $currentItem.animateCss('fadeOut');
  $currentItem.on(animationEnd, function(){
  	$currentItem.removeClass('-active');
    $nextItem.addClass('-active');
    $nextItem.animateCss('fadeIn');
  })
})
    ＆＃13; 
    .slider-list {
  padding: 25px;
  overflow: hidden;
}
.slider-list > .item {
  animation-duration: .6s;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: teal;
  padding: 50px 120px;
}
.slider-list > .item.-active {
  display: flex;
}
.slider-list > .item > .content {
  color: #fff;
  font-family: 'Arial', sans-serif;
  font-size: 55px;
  margin-bottom: 18px;
}
.slider-list > .item > .btn {
  padding: 12px 18px;
}
    ＆＃13; 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slider-list">
  <li class="item -active" data-item="1">
    <div class="content">
      1
    </div>
    <button type="button" class="btn">
      NEXT
    </button>
  </li>
  <li class="item" data-item="2">
    <div class="content">
      2
    </div>
    <button type="button" class="btn">
      NEXT
    </button>
  </li>
  <li class="item" data-item="3">
    <div class="content">
      3
    </div>
    <button type="button" class="btn">
      NEXT
    </button>
  </li>
  <li class="item" data-item="4">
    <div class="content">
      4
    </div>
    <button type="button" class="btn -back">
      BACK TO START
    </button>
  </li>
</ul>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    我似乎无法找到问题的所在，以及为什么在重复过程时，它会触发返回开始按钮

1 个答案:

答案 0 :(得分：1)

问题是你的后退按钮的事件处理程序，你使用on()而不是one()来附加animationEnd的事件处理程序，有效地多次添加该处理程序。

$currentItem.one(animationEnd, function(){
    $currentItem.removeClass('-active');
    $nextItem.addClass('-active');
    $nextItem.animateCss('fadeInRight');
  })

将其更改为.one()将解决此问题：

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$.fn.extend({
	animateCss: function(animationName) {
		this.addClass('animated ' + animationName).one(animationEnd, function() {
			$(this).removeClass('animated ' + animationName);
		});
	}
});

$('.btn:not(.-back)').click(function(){ 
	var $currentItem = $(this).closest('.item');
  var nextItemNumber = $currentItem.data('item') + 1;
  var $nextItem = $('.item[data-item="'+nextItemNumber+'"]');
  $currentItem.animateCss('fadeOutLeft');
  $currentItem.one(animationEnd, function(){
  	$currentItem.removeClass('-active');
    $nextItem.addClass('-active');
    $nextItem.animateCss('fadeInRight');
  })
})
$('.btn.-back').click(function(){
	var $currentItem = $(this).closest('.item');
  var nextItemNumber = 1;
  var $nextItem = $('.item[data-item="'+nextItemNumber+'"]');
  $currentItem.animateCss('fadeOut');
  $currentItem.one(animationEnd, function(){
  	$currentItem.removeClass('-active');
    $nextItem.addClass('-active');
    $nextItem.animateCss('fadeIn');
  })
})
.slider-list {
  padding: 25px;
  overflow: hidden;
}
.slider-list > .item {
  animation-duration: .6s;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: teal;
  padding: 50px 120px;
}
.slider-list > .item.-active {
  display: flex;
}
.slider-list > .item > .content {
  color: #fff;
  font-family: 'Arial', sans-serif;
  font-size: 55px;
  margin-bottom: 18px;
}
.slider-list > .item > .btn {
  padding: 12px 18px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slider-list">
  <li class="item -active" data-item="1">
    <div class="content">
      1
    </div>
    <button type="button" class="btn">
      NEXT
    </button>
  </li>
  <li class="item" data-item="2">
    <div class="content">
      2
    </div>
    <button type="button" class="btn">
      NEXT
    </button>
  </li>
  <li class="item" data-item="3">
    <div class="content">
      3
    </div>
    <button type="button" class="btn">
      NEXT
    </button>
  </li>
  <li class="item" data-item="4">
    <div class="content">
      4
    </div>
    <button type="button" class="btn -back">
      BACK TO START
    </button>
  </li>
</ul>

然而更简单的方法可能是使用当前幻灯片本身的索引来指示下一张幻灯片：

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$.fn.extend({
    animateCss: function(animationName) {
        this.addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});

$('.slider-list .btn').click(function(){
    var $this=$(this);
    var $items=$this.closest('.slider-list').find('.item');
    var $currentItem = $this.closest('.item');
    var nextItemNumber = $items.index($currentItem)+1;
    nextItemNumber = nextItemNumber >= $items.length ? 0 : nextItemNumber;
    var $nextItem = $items.eq(nextItemNumber);

    $currentItem.animateCss('fadeOutLeft');
    $currentItem.one(animationEnd, function(){
        $currentItem.removeClass('-active');
        $nextItem.addClass('-active');
        $nextItem.animateCss('fadeInRight');
    })
});
.slider-list {
  padding: 25px;
  overflow: hidden;
}
.slider-list > .item {
  animation-duration: .6s;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: teal;
  padding: 50px 120px;
}
.slider-list > .item.-active {
  display: flex;
}
.slider-list > .item > .content {
  color: #fff;
  font-family: 'Arial', sans-serif;
  font-size: 55px;
  margin-bottom: 18px;
}
.slider-list > .item > .btn {
  padding: 12px 18px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slider-list">
  <li class="item -active" data-item="1">
    <div class="content">
      1
    </div>
    <button type="button" class="btn">
      NEXT
    </button>
  </li>
  <li class="item" data-item="2">
    <div class="content">
      2
    </div>
    <button type="button" class="btn">
      NEXT
    </button>
  </li>
  <li class="item" data-item="3">
    <div class="content">
      3
    </div>
    <button type="button" class="btn">
      NEXT
    </button>
  </li>
  <li class="item" data-item="4">
    <div class="content">
      4
    </div>
    <button type="button" class="btn -back">
      BACK TO START
    </button>
  </li>
</ul>

相关问题
最新问题