2013-06-13 67 views
0

這是一個現實問題示例:http://www.igabiba.si 如果通過單擊>按鈕(下一個)更改精選圖片,動畫會在第一次正確觸發,但不會打開後來嘗試。稍後它會跳過動畫,並在設定的時間後位置在最終位置。Jquery animate第一次作品,但不是之後

奇怪的是,前一個按鈕的動畫完美無瑕。

這是一個動畫背景圖片的代碼部分(所有代碼都是可見源):

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

       } 

我將不勝感激一些幫助與此有關。

+0

您使用的是哪個版本的jquery? –

+0

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js是我鏈接的版本 – Bostjan

+0

我問的是哪個版本是因爲某個bug,但與您的版本無關正在使用:http://stackoverflow.com/a/16849097/1414562 –

回答

0

我設法發現了問題。在第一個動畫之後,將「left」屬性設置爲0px是個問題。它跑第二次,它改變了「正確」的屬性,但左停留在0像素,所以不是:

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

現在工程進展順利。感謝所有人的幫助。

1

將.stop()添加到所有.animate()函數的前面並查看。

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

似乎沒有幫助。感謝您試圖幫助,雖然 – Bostjan

+0

也檢查您的控制檯錯誤,...未捕獲TypeError:無法讀取未定義的屬性'cmd'www.igabiba.si/:383 ... carouFredSel:找不到「#foo2」的元素。 ... 「fb-root」div尚未創建,自動創建all.js:55 – yeyene

+0

這不是它,但感謝您指出它。以下是我的答案。 – Bostjan

相關問題