导航菜单中（a＆a：hover）之间的jQuery淡入/淡出？答案

【问题标题】：jQuery fadeIn/fadeOut between (a & a:hover) in a navigation menu?导航菜单中（a＆a：hover）之间的jQuery淡入/淡出？
【发布时间】：2012-12-26 11:07:17
【问题描述】：

我正在尝试在导航菜单上的（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 和 text 应该逐渐消失（显示原始状态）

-编辑 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>

但是，fadeOut 上的过渡有点奇怪。我愿意接受任何建议。注意：'hovered' 类是匹配 a:hover CSS 选择器的类

【问题讨论】：

标签： jquery fadein transition fadeout jquery-hover

【解决方案1】：

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

将悬停事件绑定到您的每个锚点，您可以按照以下方式进行操作
```
$('#mainmenu').find('a').hover(function(){

   //comes here upon hover
});
```

执行fadeIn 或fadeOut 或动画。下面是这样做的超级简单的代码。

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

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

由于你想为你的背景图片设置动画，你不能通过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>

所以现在你正在做的是，

悬停时：将锚点的不透明度设置为 0，将背景图像分配给它，然后将其不透明度设置为 1

悬停时：将锚点的不透明度设置为 0，删除其背景 - 图像，然后将其不透明度设置为 0

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

您必须将文本和背景图像分开，即为锚点下方的任何其他元素设置动画背景图像。

再次给你一个想法。

【讨论】：

我没有得到想要的效果，它首先以 100% 不透明度显示悬停状态，然后在悬停时淡出到 25%。当悬停时，背景图像突然消失而没有淡出, 而文本淡出，原始文本淡入
这只会改变元素的不透明度，不会改变 TS 提供的 CSS。
见@MostafaWasat，我试图给你一个想法，如何制作动画。由于 opacity 是 CSS 属性之一，因此您也可以将任何其他 css 属性注入到 animate 方法中。事实上，你的 css 和 jquery wud 的组合会为你产生想要的效果。实现的方法不止一种。

【解决方案2】：

您只能将 css 转换和 jQuery 用作后备。以下是一些帮助链接：

【讨论】：

好吧，我已经阅读了这两篇文章，我必须承认它是一种非常巧妙的转换方法:)。然而，CSS3 过渡还不支持背景图像过渡。我只是希望悬停状态在出现时淡入，没什么特别的。

【解决方案3】：

The Js code is below :

$("a").hover(function(){

        $(this).fadeOut(500);
        $(this).fadeIn(500);

    },function(){});

第一个函数在悬停时调用，第二个在悬停时调用。

您需要包含一个最新的 jquery：

<script src="http://code.jquery.com/jquery-latest.js"></script>

你可以在这里看到效果：http://jsfiddle.net/WrspV/

【讨论】：