1

設定しようとしているいくつかのアニメーションで小さな問題が発生しています。このように、いくつかの div を積み重ねています。

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

これらの各 div には、jQuery プラグイン (jquery.dropshadow.js) を介して適用されるドロップ シャドウがあります。

ある種のアニメーションを使用して div の 1 つを展開すると、問題が発生します。影は div のサイズで更新されません。アニメーションのコールバックで影を再描画できますが、それでもかなりジョギーに見えます。

アニメーションの過程で定期的にシャドウのステータスを更新できる方法はありますか、または問題を解決するより良いドロップ シャドウ ライブラリを推奨できますか? jQuery プラグインである必要はありません。

4

4 に答える 4

3

これを行う唯一の方法は (少なくともその特定のドロップ シャドウ プラグインでは)、アニメーションで必要な要素とすべてのドロップ シャドウの「ファントム」要素の両方をターゲットにすることだと思います。たとえば、次のようになります。

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

于 2008-10-10T04:48:16.167 に答える
2

JSではなく、ドロップ シャドウにCSSを使用することをお勧めします。

私は過去にこの正確な問題に対処し、ドロップ シャドウに JS を使用するのを完全にやめました。JS シャドウを使用したアニメーションが、純粋な CSS のように滑らかに見えるのを見たことがありません。また、JS を使用してページ要素を変更しすぎると、パフォーマンスの問題が発生する可能性があります。

于 2008-10-10T13:27:55.140 に答える
1

同じアニメーション効果をシャドウ要素に適用してみてください。jquery.dropshadow.js で使用されている正確な手法はわかりませんが、シャドウ キャスティング要素のコピーを作成し、それらをスタイルして、シャドウのような外観を実現していると思われます。これらのコピーがソース要素の兄弟である可能性があるため、(子要素のように) アニメーションに「追従」しません。

于 2008-10-09T23:03:40.230 に答える
0

わかりました、あなたがどのようにアニメーション化するのかはまだわかりませんが、別の例を挙げます:

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

したがって、代わりにslideToggle、入手したアニメーションのものを使用してください。

それが役立つことを願っています。

于 2008-10-09T22:27:02.973 に答える