0

リンクをクリックするとバーが下にスライドするグラフを作成しようとしています。jQuery を使用してみましたが、何も起こりません。私の#click_to_animateオブジェクトは標準リンクです。私の理解では、オブジェクトは が表示されていないボックスの外側で開始overflowし、リンクをクリックすると、 がmargin-top0 に設定されるまでオブジェクトが下に引っ込む必要があります。

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 クラスに問題があるようです。を与え、notheightに設定overflowします (これは無効です)。hiddennone

.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 に答える