jquery - 页脚淡入然后淡出

Question

我试图让页脚固定在页面底部，只有在鼠标经过它时才淡入，然后在鼠标不在它上面时淡出，但我似乎无法让它工作:

http://jsfiddle.net/PDeqM/

HTML

<footer>
Footer stuff
</footer>​

CSS:

footer {
    position: fixed;
    bottom: 0px;
    display: none;
    background: #000;
    width: 100%;
    height: 50px;
    color: #fff
}​

查询

$("footer").hover(
            function(){
                $(this).fadeIn(100);
            },
            function(){
                $(this).fadeOut(100);
            }
);​

Answer 1

如果它是隐藏的，你就不能悬停它。尝试使用不透明度:

$("footer").css({'opacity':0}).hover(
    function(){
        $(this).animate({'opacity':1},100);
    },
    function(){
        $(this).animate({'opacity':0},100);
    }
);​

http://jsfiddle.net/PDeqM/6/