justme94 2016-01-05 06:40 采纳率: 0%
浏览 1558

关于CSS3动画的一段JS代码问题

下面的jquery代码部分,$('.next')的click事件是没问题的,$('.prev')事件里执行到第3次点击就出问了,然后我把里面的animation4换成animation1,animation3换成animation2就是没问题的,CSS3的代码我也贴出来了,我实在看不出这几个animation有什么错,求大神解答!!

 <div class="header">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>

        <div class="ss-bar hidden-lg hidden-md"></div>
        <div class="bar col-lg-4 visible-lg visible-md">
            <ul>
                <li><a href="">长城会</a></li>
                <li><a href="">会员网络</a></li>
                <li><a href="">GMIC</a></li>
                <li><a href="">联系我们</a></li>
            </ul>

        </div>
    </div>

    <div class="banner">
        <div id="carousel1" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel1" data-slide-to="0" class="active"></li>
                <li data-target="#carousel1" data-slide-to="1"></li>
                <li data-target="#carousel1" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/1.jpg">

                </div>
                <div class="item">
                    <img src="images/2.jpg">

                </div>
                <div class="item">
                    <img src="images/3.jpg">

                </div>
            </div>
        </div>
        <div class="s1">
            <b>啊啊啊啊啊啊啊啊啊啊啊啊啊啊</b>
        </div>
        <div class="s1">
            <b>呃呃呃呃呃呃呃呃呃额</b>
        </div>
        <div class="s1">
            <b>滴答滴答滴答滴答滴答滴答滴答滴答</b>
        </div>
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
    </div>

 $('.s1').eq(1).css('display', 'none');
    $('.s1').eq(2).css('display', 'none');
    $('.s1').eq(0).addClass('animation2');
    var nowslide = 0;
    var animateflag = true;
    var temp1;
    $('.next').click(function(event) {
        if(animateflag){
            animateflag = false;
            $('.s1').eq(nowslide).removeClass('animation1');
            $('.s1').eq(nowslide).removeClass('animation2');
            (nowslide >= 2) ? temp1=0:temp1=(nowslide + 1);
            $('.s1').eq(temp1).css('display', 'block');
            $('.s1').eq(nowslide).addClass('animation1');
            nowslide = nowslide + 1;if(nowslide >= 3) nowslide = 0;
            setTimeout(function(){$('#carousel1').carousel('next');},850);
            setTimeout(function(){$('.s1').eq(temp1).addClass('animation2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){animateflag = true;});},1300);
        }   
    });

    $('.prev').click(function(event) {
        if(animateflag){
            animateflag = false;
            $('.s1').eq(nowslide).removeClass('animation4');
            $('.s1').eq(nowslide).removeClass('animation3');
            (nowslide <= 0) ? temp1=2:temp1=(nowslide - 1);
            $('.s1').eq(temp1).css('display', 'block');
            $('.s1').eq(nowslide).addClass('animation4');
            nowslide = nowslide - 1;if(nowslide <= -1) nowslide = 2;
            setTimeout(function(){$('#carousel1').carousel('prev');},850);
            setTimeout(function(){$('.s1').eq(temp1).addClass('animation3').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){animateflag = true;});},1300);


        }   
    });
 .animation1 { animation: animation1 .6s linear forwards; }

.animation2 { animation: animation2 .6s linear forwards; }

.animation3 { animation: animation3 .6s linear forwards; }

.animation4 { animation: animation4 .6s linear forwards; }

@keyframes animation1 { 0% { left: 20%; }
  60% { left: 19%; }
  100% { left: -40%; } }
@keyframes animation2 { 0% { left: 100%; }
  55% { left: 90%; }
  100% { left: 20%; } }
@keyframes animation3 { 0% { left: -40%; }
  60% { left: -39%; }
  100% { left: 20%; } }
@keyframes animation4 { 0% { left: 20%; }
  55% { left: 30%; }
  100% { left: 100%; } }

  • 写回答

1条回答 默认 最新

  • java仔 2016-01-06 06:52
    关注

    会是js事件并发冲突不呢?

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题