Question

我正在使用animate.css和基本jquery构建一个简单的图层滑块。基本思路是当下一个按钮单击下一张幻灯片变为可见时，幻灯片模型将获得动画类。它首先工作，但是当它从第一张幻灯片重新启动时，动画停止工作。

这是jquery：



$('.carousel-next').click(function(){
    $('.carousel-model').removeClass('animated fadeInUpBig');
    if($('.carousel-slide:last').hasClass('active')){
        $('.carousel-slide:last').removeClass('active');
        $('.carousel-slide:first').addClass('active');
    } else {
        $('.carousel-slide.active').removeClass('active').next('.carousel-slide').addClass('active');
    }
    $('.carousel-model').addClass('animated fadeInUpBig');
});

$('.carousel-next').click(function(){ $('.carousel-model').removeClass('animated fadeInUpBig'); if($('.carousel-slide:last').hasClass('active')){ $('.carousel-slide:last').removeClass('active'); $('.carousel-slide:first').addClass('active'); } else { $('.carousel-slide.active').removeClass('active').next('.carousel-slide').addClass('active'); } $('.carousel-model').addClass('animated fadeInUpBig'); });

在过去的几个小时里，我尝试了无数的方法让它正常工作而没有成功，现在我问你是否有我错过的那个棘手的关键部分：）

这是小提琴：http://jsfiddle.net/J2c4C/2/

谢谢！

Answer 1

你好，这个Jquery插件

https://github.com/JohnnyBeGood34/JQuery-AnimateSlider

希望帮助你

Answer 2

看起来像这个动画片名叫Daniel Eden的人在他正在使用的网站上搞砸了他的CSS。

<强> https://daneden.me/animate/animate.css

他忘记了所有-moz-前缀。

这是一个：

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

将animate.css与jquery滑块问题组合在一起

2 个答案: