时间戳

首页 > 解决方案 > 在动画开始之前而不是结束时应用 div CSS

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

问题描述

在这个 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);

 })

标签： jqueryjquery-ui

解决方案

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;
}

现在动画将从顶部 100 像素处开始，并且仅滑动 div 元素。

http://plnkr.co/edit/yqYTonJEBuggTU4Os​​Q6o?p=preview

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

希望有帮助。

推荐阅读