0

我正在尝试创建一个图表，其中条形图在单击链接时向下滑动。我尝试过使用 jQuery，但没有任何反应。我的#click_to_animate对象是标准链接。据我了解，对象应从不显示的框外开始overflow，然后单击链接后，对象应向下凹陷，直到margin-top设置为 0。

HTML

<div class="graph-inner">
    <div class="inner-title">
        <h3 style="color:#666">0</h3><h4>n=28</h4>
    </div><!--/.inner-title-->
    <div class="graph-charts">
        <div class="bars">
            <div class="gb"><span class="graph-number"><h3>5</h3><h4>30</h4></span></div>
            <div class="bb"><span class="graph-number"><h3>6</h3><h4>56</h4></span></div>
            <div class="ob"><span class="graph-number"><h3>7</h3><h4>114</h4></span></div>
       </div><!--/.bars-->
    </div><!--/.graph-charts--> 
</div><!--/.graph-inner-->

jQuery

$('#click_to_animate').click(function() {
    $('.gb').animate({
        marginTop:'0'
    }, 200);
})//end click

CSS

.graph-charts {
    border-top:3px solid #666;
    width:600px;
    position:absolute;
    left:95px;
    top:173px;
    overflow:none;
    }    
.inner-title {
    position:absolute;
    margin-left:160px;
    top: 110px;
    }
.bars {
    display:block;
    position:relative;
    }
.gb {
    background-color: #009966;
    height: 295px;
    width:75px;
    position:absolute;
    left:190px;
    margin-top:-295px;
    -webkit-border-bottom-right-radius:.3em;
    -webkit-border-bottom-left-radius:.3em;
    -moz-border-radius-bottomright:.3em;
    -moz-border-radius-bottomleft:.3em;
    border-bottom-right-radius:.3em;
    border-bottom-left-radius:.3em;
    }
.bb {
    background-color: #3366cc;
    height: 100px;
    width:75px;
    position:absolute;
    left:310px;
    margin-top:-295px;
    -webkit-border-bottom-right-radius:.3em;
    -webkit-border-bottom-left-radius:.3em;
    -moz-border-radius-bottomright:.3em;
    -moz-border-radius-bottomleft:.3em;
    border-bottom-right-radius:.3em;
    border-bottom-left-radius:.3em;
    }
.ob {
    background-color: #cc6600;
    height: 100px;
    width:75px;
    position:absolute;
    left:430px;
    margin-top:-295px;
    -webkit-border-bottom-right-radius:.3em;
    -webkit-border-bottom-left-radius:.3em;
    -moz-border-radius-bottomright:.3em;
    -moz-border-radius-bottomleft:.3em;
    border-bottom-right-radius:.3em;
    border-bottom-left-radius:.3em;
    }
4

1 回答 1

0

问题似乎出在您的.graph-chartscss 类上。给它一个height并设置overflow为hiddennot none（这是无效的）。

.graph-charts {
    border-top:3px solid #666;
    width:600px;
    height: 500px;
    position:absolute;
    left:95px;
    top:173px;
    overflow:hidden;
}

这里的例子：jsfiddle

于 2013-04-17T17:09:12.000 回答