導航圖像在頁面加載時是透明的嗎？

我想製作導航欄圖像（家庭，新聞，關於等），當頁面加載時，它在加載時是透明的，當我們將鼠標懸停在它上面時，其不透明度將變爲100％，就像J-查詢淡入淡出方法&並懸停了它將變得透明，但J-Query這個方法是倒置的...我試着J-Query淡入淡出方法，但當頁面加載時，他們已經100％不透明，我怎麼能編碼！感謝導航圖像在頁面加載時是透明的嗎？

我想這碼

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function(){ 
     $(".navfade").mouseover(function(){ 
     $(this).fadeTo(500,1) 
     }); 
     }); 

    $(document).ready(function(){ 
    $(".navfade").mouseout(function(){ 
     $(this).fadeTo(500,0.65) 
     }); 
     }); 

</script>

，但它不是我想要什麼

來源

2013-10-12 righton

你可以嘗試使用你的HTML佈局和你的CSS等，在JSfiddle中設置一個例子嗎？ – Joseph

此外，你不需要兩個準備好的功能來做你想做的事情。 – kevindeleon

請不要使用jQuery或javascript。曾聽說過層疊樣式表？用所需的不透明度設計您的元素並使用'：hover'。完成。 – nietonfir

嘗試這樣的事情。

$(function() { 
    $(".navfade").css({opacity: 0.5}); 
    $(".navfade").hover(
     function() { 
     $(this).animate({opacity: 1}); 
     }, function() { 
     $(this).animate({opacity: 0.5}); 
     } 
    ); 
});

來源

2013-10-12 19:57:56 kevindeleon

您也可以將.navfade初始設置在您的CSS中，而不是在ready函數中。可能首選的方式，除非你需要通過JS最初設置它出於某種原因。 – kevindeleon

非常感謝你 – righton

/* CSS */ 
     .navfade { 
      opacity: 0.5; 
      -moz-opacity:0.5; 
      -khtml-opacity: 0.5; 
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
      filter: alpha(opacity=50); 
     } 

/* JS */ 

    $(function() { 
     $('.navdfade').hover(

      function() { 
       $(this).animate({opacity : 1.0}, 250); 
      }, 
      function() { 
       $(this).animate({opacity : 0.5}, 250); 
      }); 
    });

調整不透明度和衰落持續時間根據自己的喜好。請享用！

來源

2013-10-12 19:58:45

非常感謝你 – righton

導航圖像在頁面加載時是透明的嗎？

回答

相關問題