jquery - 将动画速度设置为每秒 2 像素？

Question

如何设置动画速度使其以每秒 2 个像素的速度移动？这里我的块的长度是 310 像素。我希望它以每秒 2 个像素的速度移动。

$('#one').mouseenter(function(){
 $('.alt0').animate({width: "310px"}, 150000, function(){
    $('#refresh-1').show();
})
 $('#song-title1').show()
});
$('#refresh-1').click(function(){
$('.alt0').width(0);
$(this).hide();
})

Answer 1

将您的动画持续时间设置为310/2*1000（每像素半秒乘以 1000 毫秒）并且您的动画缓动为“线性”。

$('.alt0').animate( {width: "310px"}, 310/2*1000, "linear" );

代码在这里

Answer 2

您可以将此代码用于任何宽度：

$('.bar1').mouseenter(function(){
    $('.alt0').animate(
        {width: $(this).width()},
        ($(this).width())/2*1000,"linear",
        function(){
            $("#button").show();
        })
});
$("#button").click(function(){
    $("#button").hide();
    $(".alt0").width(0);
                             });

JsFiddle DEMO