jquery animate（）IE9和chrome - 奇怪的bahaviour！

請看這頁here。jquery animate（）IE9和chrome - 奇怪的bahaviour！

這是jquery animate（）的一個非常簡單的功能，可以將標題文本動畫化到頁面頂部 - 這就是全部！

在FF和Opera中它是完美的。

在IE9中，它首先跳轉到頁面底部，然後進行動畫處理。

在Chrome中，它跳轉到頁面的頂部，然後動畫下來！

wtf！

jQuery的電話是：

$(function(){ 

    $('#name_holder').click(function(){ 
     $('#name_holder_wrap').animate(

      {top: '75px'} 
      , 500 
      , 'swing' 
      , function() { 
       $('#name_holder').attr({"style": 'cursor:default'}); 
      } 
     ); 
    }); 
});

，這裏是所涉及的元素的CSS：

#name_holder_wrap { 
    padding: 0px; 
    width: 100%; 
    position: absolute; 
    height: auto; 
    top: 45%; 
} 

#name_holder { 
    padding: 0px; 
    width: 600px; 
    height: auto; 
    text-align: center; 
    margin-right: auto; 
    margin-left: auto; 
    display: block; 
    cursor: pointer; 
}

（對不起，我還沒有完全得到我的頭一輪是如何把代碼插入到這些帖子正確 - 無法讓那些閉合的大括號包含在代碼塊中 - 我試圖！）

所以，我真的很感激任何指針 - 我已經與它搏鬥了幾個小時現在，真的需要繼續！

非常感謝提前！

斯科特

來源

2011-04-03 Scott Clark

在IE9中爲我工作正常！然而，Chrome就像你所描述的那樣。 – Sapph 2011-04-03 08:51:30

工作正常，我在IE9對我來說太，但Chrome專用的解決將是動畫的百分比值而不是像素：

$(function(){ 

    $('#name_holder').click(function(){ 
     $('#name_holder_wrap').animate(

      {top: '15%'} 
      , 500 
      , 'swing' 
      , function() { 
       $('#name_holder').attr({"style": 'cursor:default'}); 
      } 
     ); 
    }); 
});

如果這麼想的工作，你可以改變CSS的百分比值，也許可以在一些javascript的幫助下進行。

來源

2011-04-03 09:09:45

嗨henke8100，非常感謝！你的建議奏效 - 使單位保持一致（全部以百分比表示）似乎已經成功了！再次感謝 - 我真的很欣賞簡單的直接幫助:)歡呼S – 2011-04-03 14:07:25

@Scott如果它工作，請將此標記爲接受方，並勾選綠色V圖標向左。同樣適用於您的其他問題。 – 2012-02-06 12:58:28

而不是頂部，使用'{「padding-top」：「+ = 15px」}'是相對的 – 2014-08-31 06:54:16

這裏的問題是CSS和JQuery的組合，它們需要正確才能使IE和Chrome按照您的希望工作。

下面是我如何設置的東西，它工作得很好。

.object_to_be_animated { 
    position: absolute; 
    left: 0; 
    top: 96px; 
    width: 259px; 
    height: 85px; 
    background: url(...) left top repeat; }

這裏最重要的是，我使用TOP，而不是底部絕對定位我的元素。

我然後我的結構jQuery的，像這樣

function slide_up() { $(this).children(".overlay").animate({top: '-=51px'}); } 
function slide_down() { $(this).children(".overlay").animate({top: '+=51px'}); } 

$(".rolloverLink").hoverIntent(slide_up,slide_down);

記得要用你的CSS和JQuery相同的單位，我推薦使用像素，因爲它讓事情變得精確。不要混用em，px，％。

這應該有希望解決問題

來源

2012-04-17 11:52:27

jquery animate（）IE9和chrome - 奇怪的bahaviour！

回答

相關問題