JQuery анимация

Question

У меня небольшие проблемы с анимацией, которую я пытаюсь настроить. У меня есть пара div, сложенных друг на друга, вроде этого.

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

У каждого из этих элементов есть тень, которая применяется к нему через плагин jQuery (jquery.dropshadow.js).

Проблема возникает, когда я раскрываю один из элементов 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>

Это основано на структуре визуализированного кода, который создает плагин drop-shadow ... все нечеткие копии вашего исходного элемента получают класс .dropShadow и группируются в элемент контейнера. который также имеет класс .dropShadow и застревает в документе сразу после исходного элемента (таким образом, селектор + ).

Пока вы применяете анимацию ко всем этим теневым элементам, все они становятся анимированными (однако, немного дергается от всей этой обработки ... мда).

Answer 2

Я бы предложил использовать CSS для ваших теней, а не JS .

Я имел дело с этой проблемой в прошлом, и я полностью прекратил использовать JS для теней. Я никогда не видел, чтобы анимации с тенями JS выглядели так гладко, как чистый CSS. Кроме того, использование слишком большого количества JS для изменения элементов страницы может вызвать проблемы с производительностью.

Answer 3

Попробуйте применить те же эффекты анимации к теневым элементам. Я не знаю точную технику, используемую в jquery.dropshadow.js, но я подозреваю, что она создает копии ваших элементов отбрасывания теней и стилизует их для достижения теневого вида. Возможно, что эти копии являются родственными элементами их исходных элементов, поэтому они не «следуют» за анимацией (как это делают дочерние элементы).

Answer 4

Хорошо, я до сих пор не знаю, как вы одушевляете, но приведу другой пример:

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

Итак, вместо slideToggle, просто используйте любую анимацию штуку , которую вы получили.

Надеюсь, это поможет.