使用CSS3動畫或jQuery向下滑動到可見區域

我試圖創建一個圖形，在單擊鏈接時滑動條。我試過使用jQuery，但沒有任何反應。我的#click_to_animate對象是標準鏈接。從我的理解，該物體應開始框外不顯示overflow，然後在點擊鏈接時，對象應該向下，直到margin-top被設置爲0使用CSS3動畫或jQuery向下滑動到可見區域

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; 
    }

來源

2013-04-17 Timothy Adams

這個問題似乎與你的.graph-charts css類有關。給它一個height並設置overflow到hidden而不是none（這是無效的）。

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

這裏舉例：jsfiddle

來源

2013-04-17 17:09:12 Rohrbs

嗯，這確實工作的小提琴，但不是在我的實際代碼... –

不知道這是怎麼回事，然後。我剛剛複製了你發佈的代碼並添加了一個鏈接來開始動畫。 – Rohrbs

使用CSS3動畫或jQuery向下滑動到可見區域

回答

相關問題