jQuery animation

Question

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

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

每个div都有一个通过jQuery插件（jQuery.dropshadow.js）应用的dropshadow

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

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

Answer 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，并被分组到一个容器元素中，该容器元素也有一个类.ddropShadow选择器）。

只要你将你正在做的任何动画应用于所有这些阴影元素，它们都会被动画化（然而，它在所有这些处理中都有点不稳定…uffda）。

Answer 2

我建议使用CSS来处理阴影，而不是使用JS。

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

Answer 3

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

Answer 4

好的，我仍然不知道你是如何制作动画的，但我给你举另一个例子：

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

所以，不用slideToggle，只需使用任何动画即可。

希望能有所帮助。