Question

我目前正在创建一个简单的游戏，用户可以尽快点击按钮，并且当用户点击进度条时应向用户显示进度，唯一的问题是动画非常不稳定..是无论如何要平滑动画？

和javascript：

jQuery(document).ready(function(e) {
var $counter = $('#counter');
var $button = $('#lemon-button');
var count = 2;
var speed = 70;
//test for ie7 an ie8
if (!$.support.leadingWhitespace) {
    var countAddStep = 5;
//test for ie7 an ie8
}else{
    var countAddStep = 3;
}
var timeout;

    func = function () {
    count--;
    $counter.text(count);
    if(count <= 4) {
        jQuery('.bar').height(400);
    }
    if(count >= 5) {
        jQuery('.bar').height(350);
    }
    if(count > 6) {
        jQuery('.bar').height(300);
    }
    if(count > 8) { 
        jQuery('.bar').height(200);
    }
    if(count > 12) {
        jQuery('.bar').height(100);
    }
    if(count > 14) {
        jQuery('.bar').height(20);
    }
    if(count > 15) {
        jQuery('.bar').height(0);
        alert("finish");
    }

    if(count !== 0) {
        timeout = setTimeout(func, speed);
        }
    };

    $button.on('click', function() {
        count = count+countAddStep;
        $counter.text(count);
        if (count === countAddStep) {
            count++;
            func();
        }
    });
func();
});

任何帮助都非常赞赏......

Answer 1

我尝试使用animate，并在JSFiddle上找到了一个有效的解决方案。主要问题是，平滑的动画需要时间。但在你的例子中，时间非常重要，所以你需要关注动画时间......

jQuery(document).ready(function(e) {
var $counter = $('#counter');
var $button = $('#lemon-button');
var count = 2;
var speed = 70;
//test for ie7 an ie8
if (!$.support.leadingWhitespace) {
var countAddStep = 5;
//test for ie7 an ie8
}else{
var countAddStep = 3;
}
var timeout;

func = function () {
count--;
$counter.text(count);
if(count <= 4) {
    jQuery('.bar').animate({height: 400, opacity: 1}, {duration: 100, queue: false});
}
if(count >= 5) {
    jQuery('.bar').animate({height: 350, opacity: 1}, {duration: 100, queue: false});
}
if(count > 6) {
    jQuery('.bar').animate({height: 300, opacity: 1}, {duration: 100, queue: false});
}
if(count > 8) { 
    jQuery('.bar').animate({height: 200, opacity: 1}, {duration: 100, queue: false});
}
if(count > 12) {
    jQuery('.bar').animate({height: 100, opacity: 1}, {duration: 100, queue: false});
}
if(count > 14) {
    jQuery('.bar').animate({height: 20, opacity: 1}, {duration: 100, queue: false});
}
if(count > 15) {
    jQuery('.bar').animate({height: 0, opacity: 1}, 100, function() {alert("finish");});    }

if(count !== 0 && count <= 15) {
    timeout = setTimeout(func, speed);
    }
};

$button.on('click', function() {
    count = count+countAddStep;
    $counter.text(count);
    if (count === countAddStep) {
        count++;
        func();
    }
});
func();
});

流体进度条动画

1 个答案: