javascript - jQuery动画

Question

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

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

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

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

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

score 3 · Accepted Answer

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

    <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）。

score 2 · Accepted Answer

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

I have dealt with this exact problem in the past and I have completely stopped using JS for drop shadows. I have never seen animations with JS shadows look as smooth as pure CSS. Also, using too much JS to alter the page elements can cause performance issues.

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

希望有帮助。

javascript - jQuery动画

4 回答 4

Related

Reference