0

それで、私はこれについての助けを見つけるためにインターネットを精査しました...

バー/値が左から右にソートされ、左側に最大値がある棒グラフがあります。ユーザーの操作に基づいて、棒グラフ/値が変更される場合があり、たとえば、中央のバーを 1 つ以上のスポットを左に移動する必要がある場合があります。左から右への動きをアニメートする必要があるため、これは DOM 要素を削除せずにその場で行う必要があります...これはプロジェクトにとって非常に重要なユーザーアピールのためです。

だから、私の質問は、DOM 要素を頼りにしながらそれらを同時にアニメーション化することはできないので、どのように動きを追跡できるかということだと思います。ページの読み込み時にグラフの初期インデックスを作成し、変更が加えられたときにインデックスを更新するというアイデアをいじりました。論理的には、私はこれに苦労しています。また、それを行う場合、 data 属性を使用してインデックスを作成する最良の方法は何ですか? これは HTML5 だけで、おそらく古いブラウザではサポートされていないのでしょうか? それとも、jQuery は HTML5 とは関係のないキャッシュを保持しているのでしょうか?

私はjavascript/jQueryにかなり慣れていません。私はそれを2年間使用していると思いますが、実際には小さなjQueryアニメーションと検証しか行ったことがありません. コミュニティからの情報提供を心から歓迎します!

ありがとうございました！

4

1 に答える 1

0

そうです、並べ替えによって要素をアニメーション化することはできません。

コツは、CSS プロパティを使用してグラフ スペース内にバーを配置することです。leftまたはmargin-left。

次に、正しい方法で変更すると、アニメーション効果が得られるものがあります。

各バーを順番にループし、新しい CSS left/margin-left プロパティを計算し、jQuery を使用してバーを.animate()新しい位置にスライドさせるだけです。

margin-leftバーを配置し、バーの高さも変更する必要があると仮定すると、jQuery の一般的な形式は次のようになります。

$(".bars").each(function(i, bar) {
    var $bar = $(bar);
    var marginLeft = ........;//expression that calculates or fetches the new margin-left property for bar i
    var height = ........;//expression that calculates or fetches the new height property for bar i
    $bar.animate({
        'margin-left': marginLeft,
        'height': height
    );
})

何も並べ替えたり、データ属性を使用したりする必要はありません。

于 2012-08-15T03:31:28.363 に答える