使用JQuery設置動畫元素

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

您可以將框樣式設置為顯示：無； ：

#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，沒有任何奇怪的負余量。 您也可以根據自己的喜好自定義它。