2

簡単に言えば。

私はコードの一部を見つけて、それをかなり変更しました、そしてそれはちょっとうまくいくようです。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
   $('dota').click(function(){

     });

        $('#Homebutton').toggle(function(){
            $('.animateme').html('<img src="Construct2/Images/Gnoll_Running.gif" />');         
            $('.animateme').animate({
                left: '+=150',
            }, 800, function() {
                $('.animateme').html('<img src="Construct2/Images/Gnoll_Hit.gif" />');
            });
            $('.animateme').animate({
                left: '+=0',
            }, 500);
            $('#Homebutton').html('<img src="Construct2/Images/buttonred.png" />');
            $('.animateme').animate({
                left: '+=0',
            }, 500, function() {
                $('.animateme') .html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />');
                });


        }, function(){
            $('.animateme').html('<img src="Construct2/Images/Gnoll_Running_left.gif" />');  
            $('.animateme').animate({
                left: '-=500',
            }, 2200, function() {
                $('.animateme').html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />');  
            });
        });

        $('#AddOnbutton').toggle(function(){
            $('.animateme').html('<img src="Construct2/Images/Gnoll_Running.gif" />');         
            $('.animateme').animate({
                left: '+=250',
            }, 1000, function() {
                $('.animateme').html('<img src="Construct2/Images/Gnoll_Hit.gif" />')
            });
            $('.animateme').animate({
                left: '+=0',
            }, 1000, function() {
                $('.animateme') .html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />');
                });


        }, function(){
            $('.animateme').html('<img src="Construct2/Images/Gnoll_Running_left.gif" />');  
            $('.animateme').animate({
                left: '-=500',
            }, 2200, function() {
                $('.animateme').html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />');  
            });
        });

    });
</script>

問題は、Gnoll_Hitアニメーションの約半分で「#Homebutton」を赤に変更したいということです。だから私はヒットアニメーションをつなぎ合わせましたが、それはしませんでした。

最後のアニメーションが終了した後、ボタンのリンクに移動したいので、コールバックでこれを行う必要があると思います。

4

2 に答える 2

1

はい、アニメーションが終了した後で呼び出します。2番目のパラメーターに関数を追加し、そこで次のアニメーションのセットを実行します。

そしていくつかのヒント： jqueryチェーンを使用してみてください

$('.animateme')
    .html('')
    .animate( blah blah  );

そのため、コードは少し読みやすく、少し速くなります。

次に、animate関数内で$（this）を使用することもできます

.animate( blah blah , function (){
    $(this).animate('');
  });

ハッピーコーディング:)

于 2012-07-05T04:44:31.307 に答える
0

＃Homebutton-change-to-redサブアニメーションでjQueryのdelay（）を使用するか、0から1までのダミー変数を「アニメーション化」し、ステッピング関数を使用して毎回の動作に慣れることができます。関数が実行されます（アニメーションのステップごとに1回実行されます）。

于 2012-07-04T23:04:42.490 に答える