zoukankan      html  css  js  c++  java
  • animate默认时长所带来的问题及解决

    一、需求描述

    做一个进度条长度逐渐减少的动画,当进度条长度小于等于0时,关闭动画,并弹出透明底板显示新提示。

    二、问题描述

    初始代码如下:

    //设置进度条初始长度
    var progressLength = 180;    
    //设置一个定时器    
    var timer = setInterval(function () {
        //开始游戏后进度条逐渐消失
        progressLength -= 10;
        $(".progress").animate({
             progressLength
        });
        console.log("hh");
        //如果进度条走到尽头
        if (progressLength <= 0) {
            clearInterval(timer);
            $(".over").fadeIn(100);
        }                        
    }, 50);

    遇到问题:

    进度条递减的速度快于动画速度,导致动画还没执行完,progressLength就已经≤0,底板就弹出来了。

    三、问题解决

    首先,导致问题的原因是:

    animate动画执行有默认时长,即1000(1s),就是第二个参数。

    而先前设置的定时器执行时长是50,导致两厢不匹配,即animate函数域里外不是一个速度。

    解决方法:(消灭时间差)

    1.设置animate第二个参数,使执行时长等于外面定时器的执行时长;

    (不推荐,因为两个函数之间总有执行上的时间差)

    //设置进度条初始长度
    var progressLength = 180;    
    //设置一个定时器    
    var timer = setInterval(function () {
        //开始游戏后进度条逐渐消失
        progressLength -= 10;
        $(".progress").animate({
             progressLength
        },50);
        console.log("hh");
        //如果进度条走到尽头
        if (progressLength <= 0) {
            clearInterval(timer);
            $(".over").fadeIn(100);
        }                        
    }, 50);

    2.改animate为css,这样就变成静态函数,没有时间差了

    //设置进度条初始长度
    var progressLength = 180;    
    //设置一个定时器    
    var timer = setInterval(function () {
        //开始游戏后进度条逐渐消失
        progressLength -= 10;
        $(".progress").css({
             progressLength
        });
        console.log("hh");
        //如果进度条走到尽头
        if (progressLength <= 0) {
            clearInterval(timer);
            $(".over").fadeIn(100);
        }                        
    }, 50);
  • 相关阅读:
    廖雪峰python 摘录1
    python web 测试CGI脚本
    AttributeError: 'Athlete' object has no attribute 'top3'
    python类定义小问题
    def函数安装调用的疑惑
    print_lol函数调用
    实现键盘输入信息,按enter键调用摄像头自动拍照
    EditText不能输入表情
    使用videoview播放资源文件夹下的视频
    使用videoview连续自动播放网络视屏
  • 原文地址:https://www.cnblogs.com/bbcfive/p/10144629.html
Copyright © 2011-2022 走看看