3

我正在尝试在导航菜单上的（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 选择器的类

4

3 回答 3

1

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

  1. 将悬停事件绑定到您的每个锚点，您可以执行以下操作

    $('#mainmenu').find('a').hover(function(){

   //comes here upon hover
});

  2. 执行淡入淡出或淡出或动画。下面是这样做的超级简单的代码。

     <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

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

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

再次给你一个想法。

于 2012-12-26T11:33:37.493 回答
0 
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/

于 2012-12-26T11:37:02.117 回答