流体进度条动画

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

我试图用动画它，并与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(); 
});