[英]Animate element using JQuery
我一直在玩JQuery,有几个问题。
页面完全加载后,我想从屏幕外将元素动画化为其位置。
我有自己喜欢的效果,但我觉得我是从错误的方式走近的。 我使用CSS将元素放置在页面外,并使用Jquery将其移动到正确的位置。 这正常吗?
这是我的示例:
jQuery查询
$(document).ready(function() {
$( "#box" ).animate({
top: "62px",
}, 1000, function() {
// Animation complete.
});
});
的CSS
#box {
width: 100%;
height: 62px;
background-color: black;
position: absolute;
margin-top: -62px;
}
您可以将框样式设置为显示:无; :
#box {
width: 100%;
height: 62px;
background-color: black;
display:none;
}
然后显示
$(document).ready(function() {
$( "#box" ).show('slow');
});
我不确定是什么行业标准,但是如果您愿意放弃早期的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;}
}
然后onload只需添加类
$(document).ready(function(){
$('#box').addClass('boxSlideIn');
});
这为它提供了适当的CSS,没有任何奇怪的负余量。 您也可以根据自己的喜好自定义它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.