jQuery animation

Question

I'm having some minor problems with some animations I'm trying to set up. I have a couple divs stacked on top of each other kind of like this.

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

Each of these divs has a drop shadow applied to it via jQuery plugin (jquery.dropshadow.js).

The problem occurs when I expand one of the divs using some kind of animation. The shadow does not update with the size of the div. I can redraw the shadow in the callback of the animation but still looks pretty joggy.

Is there a way that I can update the status of my shadows periodically throughout the course of the animation or can anyone recommend a better drop shadow library that would fix the problem? It doesn't have to be jQuery plugin.

Answer 1

Ok, I still don't know how you animate, but I give you another example:

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

So, instead of slideToggle, just use whatever animation thingy you got.

Hope that helps.

Answer 2

Try to apply the same animation effects to the shadow element(s). I don't know the exact technique used in jquery.dropshadow.js, but I suspect it creates copies of your shadow casting elements and styles them to achieve shadow like appearance. It is possible that these copies are siblings of their source elements, thus don't "follow" animation (as child elements would).

Answer 3

I think the only way to do this (at least with that particular drop shadow plugin) would be targeting both the element you want and all the drop-shadow "phantom" elements, in your animation. So, for example:

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

This is based on the structure of the rendered code that the drop-shadow plugin produces... all the fuzzy copies of your original element get a class of .dropShadow and get grouped into a container element which also has a class of .dropShadow and gets stuck into the document right after the original element (thus the + selector).

As long as you apply whatever animation you're doing to all of these shadow elements, they all get animated (however, it is a bit jerky from all that processing... uffda).

Answer 4

I would suggest using CSS for your drop shadows, and not 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.