Firefox中的动画元素移动其他元素

我已经创建了动画div创建滚动效果的javascript函数。

JS：

var current_page = "#first"; 
function animateScroll(curr, des){ 
    $(des).show(); 
    $(des).css("position", "absolute"); 
    $(des).css("z-index", "2"); 
    $(curr).css("z-index", "1"); 
    $(des).css("top", "100%"); 
    $(des).animate({ 
     top : "0px" 
    }, 800, function(){ 
     $(curr).hide(); 
     current_page = des; 
    }); 
} 
$(document).on("keyup", function(e){ 
    if(e.keyCode === 40){ 
     animateScroll(current_page, "#" + $(current_page).next().attr("id")); 
    } 
});

HTML：

<div id = 'why_am_i_moving'></div> 
<div class = 'main' id = 'first'>press down key</div> 
<div class = 'main' id = 'second'></div> 
<div class = 'main' id = 'third'></div> 
<div class = 'main' id = 'fourth'></div> 
<div class = 'main' id = 'fifth'></div>

CSS：

body, html{ 
    margin : 0px; 
    padding : 0px; 
    width : 100%; 
    height : 100%; 
    overflow : hidden; 
} 
div.main{ 
    width : 100%; 
    height : 100%; 
    display : none; 
    background : white; 
} 
#first{ 
    background : red; 
    display : block; 
} 
#second{ 
    background : blue; 
} 
#third{ 
    background : green; 
} 
#fourth{ 
    background : yellow; 
} 
#why_am_i_moving{ 
    position : absolute; 
    bottom : 0; 
    width : 200px; 
    height : 200px; 
    background : brown; 
    z-index : 3; 
}

有时，当我在KEYUP运行我的功能，我的网页上的所有元素开始动画前拉升小幅。

这只发生在Firefox（38.0.5），只有当我使用向下键启动动画。

小提琴：http://jsfiddle.net/bd8wzr1L/2/

是否有人知道这里发生了什么？感谢您的帮助。

来源

2015-06-24 Palo