Jquery animate работает в первый раз, но не после этого

Question

Это живой пример проблемы: http://www.igabiba.si Если вы изменили изображение, нажав кнопку> (далее), анимация запускается правильно в первый раз, но не на более поздние попытки. Позже он просто пропускает анимацию и позиции в конечной позиции после установленного количества времени.

Как ни странно, анимация предыдущей кнопки работает безупречно.

Это часть кода, которая оживляет фоновое изображение (весь код виден в источнике):

if (mode == 'prev') { 

        $('#take_div').animate({ 
        left: '-2000px', 
        }, 500, function() { 
        if (takeFields[2] != '') { 
         $('#take_link').attr('href',takeFields[2]); 
        } 
        $('#take_div').css('background',takeFields[1]+' url(/media/uploads/gTakeover/'+takeFields[0]+') no-repeat center top'); 
        $('#take_div').css('left',''); 
        $('#take_div').css('right','-2000px'); 
        $('#take_div').animate({ 
         right: '0px', 
        }, 500); 
        }); 

       } else { 

       $('#take_div').animate({ 
        right: '-=2000', 
        }, 500, function() { 
        if (takeFields[2] != '') { 
         $('#take_link').attr('href',takeFields[2]); 
        } 
        $('#take_div').css('background',takeFields[1]+' url(/media/uploads/gTakeover/'+takeFields[0]+') no-repeat center top'); 
        $('#take_div').css('right',''); 
        $('#take_div').css('left','-2000px'); 
        $('#take_div').animate({ 
         left: '0px', 
        }, 500); 
        }); 

       } 

Я был бы признателен за помощь в этом.

Answer 1

Мне удалось найти проблему. Это была проблема, когда свойство «left» было установлено на 0px после первой анимации. Во второй раз он побежал он имел изменяющееся свойство «правильную», но левый остался в 0px, поэтому вместо того, чтобы:

$('#take_div').animate({ 
       right: '-=2000', 
       }, 500, function() { 
       if (takeFields[2] != '') { 
        $('#take_link').attr('href',takeFields[2]); 
       } 
       $('#take_div').css('background',takeFields[1]+' url(/media/uploads/gTakeover/'+takeFields[0]+') no-repeat center top'); 
       $('#take_div').css('right',''); 
       $('#take_div').css('left','-2000px'); 
       $('#take_div').animate({ 
        left: '0px', 
       }, 500); 
       }); 

Я сделал это:

$('#take_div').stop().animate({ 
        right: '-2000px', 
        }, 500, function() { 
        if (takeFields[2] != '') { 
         $('#take_link').attr('href',takeFields[2]); 
        } 
        $('#take_div').css('background',takeFields[1]+' url(/media/uploads/gTakeover/'+takeFields[0]+') no-repeat center top'); 
        $('#take_div').css('right',''); 
        $('#take_div').css('left','-2000px'); 
        $('#take_div').stop().animate({ 
         left: '0px', 
        }, 500, function() { 
         $('#take_div').css('left','auto'); 
        }); 
        }); 

Сейчас он работает гладко. Спасибо за помощь, хотя ребята.

Answer 2

добавить в .stop() перед всеми функциями .animate() и посмотреть.

$('#take_div').stop().animate({ 
    right: '0px', 
}, 500);