jQuery动画

Posted 2023-05-07

【中文标题】jQuery动画

【英文标题】：jQuery animation

【发布时间】：2010-09-16 09:18:31

【问题描述】：

我在尝试设置一些动画时遇到了一些小问题。我有几个像这样堆叠在一起的 div。

<div id="div1">
   Stuff...
</div>
<div id="div2">
   More Stuff...
</div>

每个 div 都有一个通过 jQuery 插件 (jquery.dropshadow.js) 应用到它的阴影。

当我使用某种动画展开其中一个 div 时会出现问题。阴影不会随着 div 的大小而更新。我可以在动画的回调中重绘阴影，但看起来仍然很慢。

有没有一种方法可以在整个动画过程中定期更新我的阴影状态，或者任何人都可以推荐一个更好的阴影库来解决这个问题？它不一定是 jQuery 插件。

【问题讨论】：

你也可以分享一些你的jquery代码吗？

【参考方案1】：

我认为做到这一点的唯一方法（至少使用那个特定的阴影插件）将在你的动画中同时定位你想要的元素和所有的阴影“幻影”元素.所以，例如：

    <style type="text/css">
            #div1  width: 50px; 
    </style>

    <div id="div1">
            <p>Here is a lot of stuff. Stuff stuff stuff.</p>
</div>

<script type="text/javascript">
    $(document).ready(function() 
            $("#div1").dropShadow();
            $("#div1").click(function() 
                    $("#div1, #div1 + .dropShadow .dropShadow").animate( width: "400px" , 1500);
            );
    );
    </script>

这是基于阴影插件生成的渲染代码的结构...原始元素的所有模糊副本都得到一个类 .dropShadow 并被分组到一个容器中元素也有一个类 .dropShadow 并在原始元素之后立即卡在文档中（因此是 + 选择器）。

只要你对所有这些阴影元素应用你正在做的任何动画，它们都会被动画化（但是，它从所有的处理中有点生涩...... uffda）。

【参考方案2】：

我建议您使用 CSS 作为阴影，而不要使用 JS。

我过去已经处理过这个确切的问题，并且我已经完全停止使用 JS 来制作阴影。我从未见过带有 JS 阴影的动画看起来像纯 CSS 一样流畅。此外，使用过多的 JS 来更改页面元素可能会导致性能问题。

【讨论】：

我同意你对元素的 边框 的阴影，但原始发帖人询问的 jQuery 插件实际上为所有文本添加了阴影 inside 元素（通过制作几个更轻的、定位的副本）。你不能用 CSS 做这样的事情。

其实可以，使用 text-shadow 属性。

【参考方案3】：

尝试对阴影元素应用相同的动画效果。 我不知道 jquery.dropshadow.js 中使用的确切技术，但我怀疑它会创建阴影投射元素的副本并设置它们的样式以实现类似阴影的外观。这些副本可能是其源元素的兄弟，因此不要“跟随”动画（就像子元素那样）。

【参考方案4】：

好吧，我还是不知道你是怎么做动画的，不过我再给你举个例子：

$('#foo').slideToggle().ready(function()
  $('#foo').dropShadow(options); 
);

所以，不要使用slideToggle，而是使用你得到的任何动画thingy。

希望对您有所帮助。