jQuery 淡入/淡出 (a & a :hover) in a navigation menu?

Question

我正在尝试在导航菜单上的(a 和 a:hover)之间进行淡入/淡出过渡

导航菜单的结构如下:

<div class="menubar">
  <ul id="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Team</a></li>
    <li><a href="">News</a></li>
    <li><a href="">EVENTS</a></li>
    <li><a href="">MultiMedia</a></li>
    <li><a href="">Fans</a></li>
    <li><a href="">Forums</a></li>
  </ul>
</div>

a 标签的 CSS 样式如下:

#mainmenu li a {
    color: #fdb813;
    line-height: 50px;
    padding:12px 25px;
    text-shadow: 0px 1px 4px #ccc;
    text-decoration:none;
}
#mainmenu li a:hover{
    color: #000;
    background: url(images/menuhover.png) repeat;
    text-shadow: 0px 1px 4px #777;
}

我想用 fadeIn 和 fadeOut 在正常状态和悬停状态之间进行转换。我不是 jQuery 专家，所以我尝试侵入代码，但我总是得到一个消失的菜单!

-编辑-

明确地说，这就是我希望的过渡方式:

悬停:背景图像和文本颜色应逐渐出现。而原始文本保持原样(它不应该在转换开始时消失)

hover-out:bg-img和文本应该逐渐消失(显示原始状态)

-编辑2-

到目前为止，我已经使用以下代码成功实现了淡入过渡。

<script type="text/javascript">
 $(document).ready(function(){
  $('#mainmenu li a').hover(
                function () {
                    $(this).css('opacity',0.1).animate({opacity: 1},250);
                }, //this is called on hover in
                function () {
                    $(this).addClass('hovered');
                    $(this).fadeOut(function(){
                        $(this).removeClass('hovered').fadeIn(250);
                    });
                } //this is called on hover out
            );
       }); 
</script>

但是淡出的转换表现得有点奇怪。我愿意接受任何建议。注意:'hovered' 类是与 a:hover CSS 选择器匹配的类

Answer 1

假设您想在鼠标悬停时执行一些动画。下面是您可以使用的简单代码。

1. 将悬停事件绑定(bind)到每个 anchor ，您可以执行以下操作

   $('#mainmenu').find('a').hover(function(){
   
      //comes here upon hover
   });
   

2. 执行淡入或淡出或动画。下面是执行此操作的 super 简单代码。

    <script>
    $(document).ready(function(){
        $('#mainmenu').find('a').hover(
          function(){
               $(this).animate({opacity: 0.25}, 200, function() { }); 
              } ///gets called when hover in
         ,
          function(){
                $(this).animate({opacity: 1}, 200, function() {}); 
   
           }//gets called when hover out
        );
        }); 
     </script>
   

所以基本上你是在悬停在 anchor 上时执行动画，然后删除悬停时产生的效果。这是一个非常简单的案例，致力于为您提供一个思路。

由于您想要为背景图像添加动画效果，因此无法通过 jquery animate 方法来实现，而是通过简单的逻辑来实现。尝试下面的脚本:

  <script>
         $(document).ready(function(){
             $('#mainmenu').find('a').hover(
             function(){
               $(this).animate({opacity: 0}, 'slow', function() {
                        $(this).css({'background-image': 'url(images/hovermenu.png)'})
                        .animate({opacity: 1});
                        }); 
             } ///gets called when hover in
              ,
             function(){
               $(this).animate({opacity: 0}, 'slow', function() {
                            $(this).css({'background-image': 'url()'})
                        .animate({opacity: 1});
                        }); 
             });
             }); 
          </script>

所以现在你正在做的是，

悬停时:将 anchor 的不透明度设置为 0，为其指定背景图像，然后将其不透明度设置为 1

悬停时:将 anchor 的不透明度设置为 0，删除其背景图像，然后将其不透明度设置为 0

这很接近你想要的。看，您想要的是使文本静态并对其背景图像产生效果，这对于您当前的菜单结构来说是不可能的。

您必须将文本和背景图像分开，即保留在 anchor 下方的任何其他元素的动画背景图像。

我再次给你一个想法。