Question

我试图让页脚保持固定在页面底部，只有当鼠标移过它时才会淡入，然后一旦鼠标悬停在它上面就会淡出但我似乎无法让它工作：

HTML

<footer>
Footer stuff
</footer>

CSS：

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

Jquery的

$("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/

Answer 2

您必须为其不透明度设置动画，而不是其可见性，因为正在运行fadeOut()会使其在最后消失。

此代码有效：

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

演示：http://jsfiddle.net/PDeqM/8/

Answer 3

用户不透明度而不是显示。

http://jsfiddle.net/PDeqM/9/

页脚淡入然后退出

3 个答案: