在不同的瀏覽器中奇怪的jquery動畫行爲

我有一個簡單的動畫在Firefox中正常工作，現在我在所有其他不同的主流瀏覽器中測試過它，並且很不幸地表現出奇怪的行爲。在不同的瀏覽器中奇怪的jquery動畫行爲

.truck元素在從左向右移動時應該慢慢淡入，並在最後淡出。

在除FF它保持正確和向後移動了一下所有的瀏覽器..

也許你有一個想法，這個問題可能是什麼。

HTML：

<div class="panel panel-default"> 
<div class="panel-body">    
     <div class="animation"></div> 
     <div class="truck"></div> 
</div> 
</div>

CSS：

.panel-body { 
    position: relative; 
} 
.animation { 
    background: green; 
    width: 788px; 
    height: 145px; 
    margin: 0 auto; 
} 
.truck { 
    background: black; 
    width: 60px; 
    height: 34px; 
    position: absolute; 
    margin-top: -34px; 
}

的jQuery：

$(document).ready(function(){ 
    var truck = $('.truck'); 
    truck.css("opacity", "0"); 
    truck.animate({ 
     right: 15 
    }, { 
     queue: false, 
     duration: 5000 
    }) 
    .animate({ 
     opacity: 1 
    }, 1000) 
    .delay(3000) 
    .animate({ 
     opacity: 0 
    }, 1000); 

});

謝謝！

來源

2013-10-31 Sebsemillia

是不是標題是一種悖論？ – F0G

你是對的，我改變了它。 :) – Sebsemillia

，而不是做

truck.animate({ 
      right: 15 
     }, { 
      queue: false, 
      duration: 5000 
     })

改變它left 將努力爲所有的瀏覽器

truck.animate({ 
      left: 500 
     }, { 
      queue: false, 
      duration: 5000 
     })

fiddle

給檢查

來源

2013-10-31 14:18:08 lopa

你是對的！非常感謝你！ – Sebsemillia

你改變「右」功能，但你沒有設置第一這個屬性的值。例如，我設置「right:100%」，它工作正常。

http://jsfiddle.net/zJt3T/

來源

2013-10-31 14:18:48 Anon

lopa的答案在我的上下文中效果更好。但是，謝謝你的幫助。 – Sebsemillia

在不同的瀏覽器中奇怪的jquery動畫行爲

回答

相關問題