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() в t анимации, и теперь он работает. Поэтому, если вы когда-либо захотите иметь на своей странице swinging-логотип, вот код:

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() 
     }); 
    } 

});