頁腳淡入然後出

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/