PHP変数で定義された表のセル幅をどのようにアニメーション化するのですか？

Question

私はオンラインのRPGスタイルのゲームサイトを作っています。しかし、私は、アニメーションアクションを実行するために、いくつかの形式のjavaやjqueryを使用することを知っています。私はそれが機能するように考えることができるあらゆる方法を試しましたが、私はできません。

基本的に私のコードでは、HPバー（表のセル）を指定された幅に設定する変数があります。表のセルをコード内で定義された別の変数に縮小または拡大しますダメージが計算されます。

どうすればこのようなことをやりますか、私を助けてください！

これは私が試したものの一例である：

---

$(document).ready(function() { 

    $("health").animate({ "width": "-=100" }, "slow"); 

}); 

---

私は健康に設定されたセルIDを持つテーブルを持って、私は、ID、クラスと名前を試してみました。

これが十分具体的であることを願っております。ありがとうございます。

Answer 1

idを使用する場合は、idの前に接頭辞として#、またはクラス名を使用する場合は$(".health")の接頭辞を付ける必要があります。

同様：

$("#health").animate({ "width": "-=100" }, "slow"); 

または：たとえば

$(document).ready(function() { 
    $(".health").animate({ "width": "-=100" }, "slow"); 
}); 

：

$("#health").animate({ "width": "-=100" }, "slow");

td {width: 300px; background-color: #f00;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table><tr><td id="health">test</td></tr></table>

Answer 2

There are multiple way to do animation in HTML, You have already tried with jQuery, syntax is right. But won't be possible with table. For animation like a bar would be zig-zag you would need Div or span. 

参考：Click to see example あなたは同じものを探していますか？

Answer 3

私はそれを動作させました。

$（ドキュメント）.ready（関数（）{ $（ "＃健康"）アニメーション（{ 幅： "" }、{ 持続時間：500、 }）; } ）;