页脚淡入然后出

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 
}​ 

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

你必须动画其不透明度，而不是它的知名度，为运行​​使得它消失在最后。

此代码的工作：

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