Question

In this plunk我有一个显示div的jQuery UI动画（slideDown）。 div还具有margin-top:100px属性，可将其100px显示在上边距之下。

问题在于动画开始时，它会忽略边距，并且仅在动画结束后才应用。我需要在动画开始时应用边距。如何做到这一点？

HTML

<body style="background-color:blue">
   <div id="div1" style="background-color:orange;width:180px;height:40px;margin-top:100px"></div>
</body>

JavaScript

 $(function() {
    var div1 = $('#div1');
    div1.hide();

    setTimeout(function(){
       div1.slideDown();
    }, 1000);

 })

Answer 1

HTML

  <body style="background-color:blue">
  <div id="div1" class="div1"></div>
  </body>

JAVASCRIPT

$(function() {
    var div1 = $('#div1');
    var b = div1.position();
    div1.hide();
    setTimeout(function(){
        div1.slideDown({top: "+" + b.top});
    }, 1000); 
})

CSS

.div1 { width: 160px; height: 40px; position:absolute; border:1px solid black; background-color: orange; top: 50px; }

请参阅我的Plunker分叉版本。 Position and then Animation

Answer 2

slideDown动画从0开始并将项目向下滑动到最终位置。

如果您希望它从顶部向下滑动100px，请添加一个包装器。

HTML

<div class="wrapper">
  <div id="div1" style="background-color:orange;width:180px;height:40px;"></div>
</div>

CSS

.wrapper {
  margin-top: 100px;
}

现在，动画将从顶部开始100px，仅div元素向下滑动。

http://plnkr.co/edit/yqYTonJEBuggTU4OsQ6o?p=preview

旁注，我看到您有一个ID为'div1'的DIV，但在CSS中，您为'div1'提供了一个类定义。 ID选择器为#，其中类别选择器为.。因此，如果需要，您可以考虑将其更改为#div1 {}。

希望有帮助。

在动画开始之前而不是结束时应用div CSS

2 个答案: