使用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向下滑动到可见区域

回答

相关问题