Jquery：Swinging logo

Question

私は現在、古い学校のC64グループのウェブサイトを作っています。古いイントロのように左右にスイングするロゴを表示するといいと思いました。

私はそれを持っていると思っていましたが、一方向に振り回してから戻って止まります。ここで

コードです：

jQuery(document).ready(function() { 
function right() { 
    $('header img').animate({ 
    left: '680px', 
    }, 5000, function() { 
    left() 
    }); 
} 
function left() { 
    $('header img').animate({ 
    left: '0px', 
    }, 5000, function() { 
    right() 
    }); 
} 
}); 

私は、単純な何かが欠けてると確信している、任意の助けをいただければ幸いです。

Answer 1

スコープの問題があるようです。次のように、準備完了イベントハンドラの外で関数を定義してみてください。

function right() { 
    $('header img').animate({ 
    left: '680px', 
    }, 5000, function() { 
     left(); 
    }); 
} 

function left() { 
    $('header img').animate({ 
    left: '0px', 
    }, 5000, function() { 
     right(); 
    }); 
} 

jQuery(document).ready(function() { 
    right(); 
}); 

Answer 2

アニメーションキューとは関係があります。アニメーションにstop（）を追加しました。したがって、あなたのページにスイングロゴをつけたい場合は、次のコードを入力してください：

jQuery(document).ready(function() { 
right(); 

    function right() { 
     $('#images img').stop().animate({ 
// Move the image right to the width of the container, minus the width of the image 
     left: '480px', 
     }, 5000, function() { 
     left() 
     }); 
    } 
    function left() { 
     $('#images img').stop().animate({ 
// Move back to the left 
     left: '0px', 
     }, 5000, function() { 
     right() 
     }); 
    } 

});