[英]Animate element using JQuery
I've been playing around with JQuery and had a few questions. 我一直在玩JQuery,有几个问题。
I would like to animate an element from off screen to it's position after the page is fully loaded. 页面完全加载后,我想从屏幕外将元素动画化为其位置。
I have the effect I like, but I feel i approached it from the wrong way. 我有自己喜欢的效果,但我觉得我是从错误的方式走近的。 I am positioning the element off page with CSS and using Jquery to move it to the correct spot. 我使用CSS将元素放置在页面外,并使用Jquery将其移动到正确的位置。 Is this normal? 这正常吗?
Here is my example: 这是我的示例:
JQuery jQuery查询
$(document).ready(function() {
$( "#box" ).animate({
top: "62px",
}, 1000, function() {
// Animation complete.
});
});
CSS 的CSS
#box {
width: 100%;
height: 62px;
background-color: black;
position: absolute;
margin-top: -62px;
}
http://codepen.io/Legym/pen/vEbJqG/ http://codepen.io/Legym/pen/vEbJqG/
You can set box style to display:none; 您可以将框样式设置为显示:无; : :
#box {
width: 100%;
height: 62px;
background-color: black;
display:none;
}
and then show it 然后显示
$(document).ready(function() {
$( "#box" ).show('slow');
});
I'm not sure what industry standard is, but if you're willing to forsake some early IE 8 compatibility I can offer an alternative using CSS3; 我不确定是什么行业标准,但是如果您愿意放弃早期的IE 8兼容性,则可以使用CSS3提供替代方法。
.boxSlideIn{
animation: slideDown 2s;
-webkit-animation: slideDown 2s;
}
@-webkit-keyframes slideDown{
from {top: -62px;}
to {top: 0px;}
}
@keyframes slideDown{
from {top: -62px;}
to {top: 0px;}
}
Then onload just add the class 然后onload只需添加类
$(document).ready(function(){
$('#box').addClass('boxSlideIn');
});
This gives it the proper CSS off the bat, without any weird negative margins. 这为它提供了适当的CSS,没有任何奇怪的负余量。 Also you can customize it to your liking. 您也可以根据自己的喜好自定义它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.