导航图像在页面加载时保持透明

navigation images to be transparent while the page loads?

本文关键字：透明 加载 图像 导航      更新时间：2023-09-26

我想制作导航栏图像(主页、新闻、关于等(，当页面加载时，它在加载时是透明的，当我们将鼠标悬停在它上面时，它的不透明度将变为 100%，就像 J-Query 淡入淡出方法一样，悬停时它会变得透明，但 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>

但这不是我想要的

尝试这样的事情。

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

/* 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);
            });
    });
根据

自己的喜好调整不透明度和淡入淡出持续时间。享受！

相关文章：