Javascript jQuery动画

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

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

每个div都通过jQuery插件jQuery.dropshadow.js应用了一个dropshadow

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

---

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

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

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

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

所以，不用滑动切换，只要使用你得到的任何动画即可

---

希望有帮助。

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

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

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

所以，不用滑动切换，只要使用你得到的任何动画即可

---

希望有帮助。

尝试将相同的动画效果应用于阴影元素。

---

我不知道jquery.dropshadow.js中使用的确切技术，但我怀疑它会创建阴影投射元素的副本，并设置它们的样式以实现类似阴影的外观。这些副本可能是源元素的同级副本，因此不要像子元素那样跟随动画。

尝试将相同的动画效果应用于阴影元素。

---

我不知道jquery.dropshadow.js中使用的确切技术，但我怀疑它会创建阴影投射元素的副本，并设置它们的样式以实现类似阴影的外观。这些副本可能是源元素的同级副本，因此不要像子元素那样跟随动画。

我认为至少在特定的阴影插件中这样做的唯一方法是在动画中同时瞄准您想要的元素和所有阴影幻影元素。例如：

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

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

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

---

只要你将你正在做的任何动画应用到所有这些阴影元素上，它们都会被设置动画，然而，所有这些处理都有点不稳定。。。uffda.

我认为，至少在使用特定的drop shadow插件时，唯一能做到这一点的方法是，在动画中同时瞄准您想要的元素和所有drop shadow phantom元素。例如：

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

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

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

只要你将你正在做的任何动画应用到所有这些阴影元素上，它们都会被设置动画，然而，所有这些处理都有点不稳定。。。uffda。

我建议您在阴影中使用CSS，而不是JS

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

我建议对阴影部分使用CSS，而不是JS

---

我在过去处理过这个问题，我已经完全停止使用JS进行阴影投影。我从未见过JS阴影的动画看起来像纯CSS一样平滑。另外，使用太多的JS来更改页面元素可能会导致性能问题。

您也可以共享一些jquery代码吗？您也可以共享一些jquery代码吗？我同意您在元素的边框周围放置阴影，但是原始海报询问的jQuery插件实际上通过制作几个更轻的定位副本，为元素内的所有文本添加了阴影。你不能用CSS做这样的事情。事实上，你可以，使用文本阴影属性。我同意你在元素的边界周围放置阴影，但是原始海报询问的jQuery插件实际上通过制作几个较轻的定位副本，将阴影添加到元素内的所有文本中。你不能用CSS做这样的事情。实际上，你可以，使用文本阴影属性。