1

jquery を使用して、html 要素から取得したテキストの文字列をアニメーション化したい:

<h1>Animate</h1>

jquery 部分の場合:

$(document).ready(function() {

$( "h1" ).animate({ fontSize: "90px" }, 1500 )
     .animate({ fontSize: "50px" }, 1500 );

});

これは h1 テキスト値全体をアニメーション化しますが、h1 テキストの各文字をアニメーション化したいと考えています。

2 番目の jquery 部分:

$(document).ready(function () {

    var animateChar = $("h1").text();
    for(i=0; i<animateChar.length; i++) {

        //alert(i + ': ' + animateChar.charAt(i));
        // for every animateChar.charAt[i] want to run this
        //jquery animation.
        //$( "h1" ).animate({ fontSize: "90px" }, 1500 )
        //.animate({ fontSize: "50px" }, 1500 );

        }
 });

これは私が立ち往生しているビットです。ありがとう

4

3 に答える 3

6

DOM 要素で jQuery 関数を使用できます。キャラクター別ではありません。文字ごとに異なる DOM 要素を使用する必要があります。

<span>A</span><span>N</span><span>I</span>...

このようなものでトリックを行う必要があります

$('span').each(function() {
    var that = $(this);
    setTimeout(function() { 
        that.animate({ fontSize: "90px" }, 1500 )
            .animate({ fontSize: "50px" }, 1500 );
    },that.index()*100);
});​

-編集-

ワーキングjSFIDDLE

-編集2-

乱雑な HTML JSFIDDLE なし(まだ乱雑ですが、javascript が乱雑になります ;))

于 2012-07-23T15:09:07.507 に答える
0 
<span class="animate">A</span><span class="animate">n</span><span class="animate">i</span><span class="animate">m</span><span class="animate">a</span><span class="animate">t</span><span class="animate">e</span>

$(document).ready(function() {

   var count = 0;       

   function animation(elm) {
       if(count == $(".animate").length)
       {
          clearInterval(id);
          return;
       }

       $( elm ).animate({ fontSize: "90px" }, 1500 )
     .animate({ fontSize: "50px" }, 1500 );
     count++;
   }

   var id = setInterval(animation($(".animate")[count]), 3200);//Give time for animation to run.

});

これにより、各キャラクターがアニメーション化されます。

于 2012-07-23T15:10:03.480 に答える
0

HTML をきれいに保ちたい場合は、次のメソッドを追加して、文字をspanタグで囲みます。wrapCharacters($("h1"))何かをアニメートする前にonLoad を使用してこの onLoad を実行し、次に によって返された文字をアニメートし$(".animate")ます。

function wrapCharacters(obj)
{
    var html = '';
    var text = obj.text();
    for (var i = 0; i < text.length; i++)
    {
        html += '<span class="animate">' + text[i] + '</span>';
    }
    obj.html(html);
}
于 2012-07-23T15:14:20.923 に答える