從下到上的JQuery動畫不能在Chrome中工作

Question

我在動畫從底部到頂部的div動畫時遇到了問題。它在Firefox中運行良好，但在Chrome中表現奇怪。我的猜測是，這與「頂部」獲得動畫而不是「底部」有關，但我不知道要解決這個問題。

JSFiddle here:

\t $(document).ready(function(){ 
 

 
\t $("#animate").click(function() { 
 

 
$("#two").animate(
 

 
\t { 
 
\t \t 
 
\t \t top: "100" 
 

 

 
\t }, 1000); 
 
    
 
    }); 
 

 
    });

html, body { height:100%; } 
 

 
#container { 
 
position: relative; 
 
width:100%; 
 
margin: 0 auto; 
 
background: #ccc; 
 
height: 100%; 
 
clear:both; 
 
} 
 

 
#left { 
 
position: relative; 
 
width:25%; 
 
max-width: 300px; 
 
float:left; 
 
height: 100%; 
 
background: blue; 
 

 
} 
 

 
#right { 
 

 
width:50%; 
 
max-width: 649px; 
 
float:right; 
 
height: 100%; 
 
background: red; 
 

 
} 
 

 
#one { 
 
position: absolute; 
 
width:100%; 
 
height: 100px; 
 
background: black; 
 
top:0; 
 

 
} 
 

 
#two { 
 

 
width:100%; 
 
height: 100px; 
 
background: green; 
 
position: absolute; 
 
bottom:0; 
 

 

 

 
}

<div id="container"> 
 

 
\t <div id="left"> 
 

 
\t \t <div id="one"> 
 
\t </div> 
 

 
\t <div id="two"> 
 
\t \t <button id="animate">button</button> 
 
\t </div> 
 

 
\t </div> 
 

 
\t <div id="right"> 
 
\t </div> 
 

 
</div>

Answer 1

對於提供HTML/CSS，明確地限定從所述底部的方向應該在Firefox和鉻工作：

$(document).ready(function(){ 

    $("#animate").click(function() { 

$("#two").animate(
    { 
     bottom: "+=" + (parseInt($("#container").css("height"),10) - parseInt($("#one").css("height"),10) - parseInt($("#two").css("height"),10)) 
    }, 1000); 

    });//animate 

    });//Doc ready 

這可能不成爲您想要完成的理想解決方案，但是如果沒有問題，這是一個解決方法h使用容器的高度和上述元素從底部導出像素的數量。