Question

我一直在玩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;
}

http://codepen.io/Legym/pen/vEbJqG/

Answer 1

您可以将框样式设置为display：none; ：

#box {
  width: 100%;
  height: 62px;
  background-color: black;
  display:none;
}

然后显示

$(document).ready(function() {  
  $( "#box" ).show('slow');
  });

Answer 2

我不确定行业标准是什么，但如果您愿意放弃早期的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击球，没有任何奇怪的负边距。您也可以根据自己的喜好自定义它。

使用JQuery的Animate元素

2 个答案: