Question

我使用html创建了一个图形，现在我想在初始加载时给它一个很好的效果。我希望图表的条形图从左侧飞入。下面的代码就是这样，唯一的问题是每个条的最终宽度为70％（显然，因为我在jQuery代码中设置了它）。相反，我需要该数字对于条形内的宽度设置是唯一的（span标签）。我假设答案是这样的：

$(this).attr('width')...

但我无法让它发挥作用，请帮助。

守则：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<style type="text/css">

div.graph { display: none; border: 1px solid red; height: 200px; width: 400px; margin: 0 auto; }

div.graph span { display: none; display: block; background: red; height: 20px; margin-bottom: 10px; }

</style>

<script type="text/javascript">
$(document).ready(function() {

    $('div.graph').fadeIn('slow');

    $('div.graph > span').animate({
        width: "70%"
    }, 1500 );

});
</script>

<div class="graph">
    <span style='width:10%'></span>
    <span style='width:40%'></span>
    <span style='width:25%'></span>
    <span style='width:15%'></span>
    <span style='width:10%'></span>
</div><!-- graph -->

Answer 1

修改
阅读完代码之后，如果你不关心非JS支持[有很多casex就不用了]，你可以使用.data()方法[非常优雅：]]

HTML：

<span data-width="10%">Hello</span>

JS：

$('div.graph > span').each(function(){ $(this).animate({ width: $(this).data('width') }, 1500 ); });

更新示例

http://jsfiddle.net/vGUM7/2/

<强>码

.animate({ 'width': $(element).width() },500);

示例

http://jsfiddle.net/vGUM7/1/

[已更新为％]

Answer 2

尝试使用此尺寸：

$('div.graph > span').each(function(){
    var w=$(this).width();
    $(this).width(0);
    $(this).animate({
        width: w
    }, 1500 );
});

Answer 3

你可以做点什么：

$(document).ready(function() {
    $('div.graph > span').each(function() {
        var $this = $(this);
        var w = $this.width();  // Grab what it should be
        $this.width(0);  // Reset so it does the animation
        $this.animate({
            width: w
        }, 1500 );
    });
    $('div.graph').fadeIn('slow');
});

它会读取您想要的条形图，然后将其设置为0.设置动画。完成所有设置后，淡入开始

Answer 4

试试这个......

     $('div.graph').fadeIn('slow');

     var bars = $('div.graph > span');
     for(var i=0; i<bars.length; i++){
       var w = $(bars[i]).width();
       $(bars[i]).width(0);
       $(bars[i]).animate({
          width: w
       }, 1500);
     }

Answer 5

$(this).width()应该可以使用，或者$(this).css('width');

然而.css('width')会返回css所具有的值，例如'10％'或'auto'

如何使用jQuery获取元素的width属性？

5 个答案: