jQuery动画宽度的变量

Question

我无法在我设置为变量的div宽度上获得平滑动画。它应该像进度条一样动画。我在JSfiddle上有一个演示。我怎样才能获得流畅的动画？谢谢！

HTML：

<div id="pb"><div></div></div>

<a href="#" class="test" data-value="25%">25</a>
<a href="#" class="test" data-value="50%">50</a>
<a href="#" class="test" data-value="75%">75</a>    
<a href="#" class="test" data-value="100%">100</a>

jQuery的：

$(function () {
    $( "#pb div" ).width("50%");

    $('.test').click( function () {
         var value = parseInt($(this).attr('data-value'));
        var test = $( "#pb div" ).css({width: (value) + '%'});

        $('#pb div').animate({
            width: test,
        }, 1000);
    });
});

Answer 1

的 jsFiddle Demo 的

你已经在那里了：）

只需在动画中使用您的值，而不是通过css属性直接设置宽度，如下所示：

$('#pb div').animate({
        width: value+"%",
    }, 1000);

Answer 2

您的 var test = ... 行已经在改变css宽度。 而只需使用animate函数，如下所示：

$(function () {
    $( "#pb div" ).width("50%");

    $('.test').click( function () {
        var value = parseInt($(this).attr('data-value'));
        test = $( "#pb div" ).animate({width: (value) + '%'});
    });
});

Answer 3

您使用.css和.animate设置相同的宽度，因此它不会有任何动画帧：

$(function () {
    $("#pb div").width("50%");

    $('.test').click(function() {
        $('#pb div').stop().animate({
            width: $(this).data('value')
        }, 1000);
    });
});

演示：http://jsfiddle.net/srQVv/1/