javascript - 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/