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 宽度。 而是使用下面的动画函数：

$(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/