流畅的进度条动画

Question

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

这里是JSFIDDLE

和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();
});