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专家，所以我试图破解代码，但我总是最终得到一个消失的菜单！

- 编辑 -

很明显，这就是我想要过渡的方式：

悬停：背景图片＆amp;文字颜色应该逐渐出现。而原始文本保持原样（它不应在转换开始时消失）

悬停：bg-img和文字应逐渐消失（显示原始状态）

-EDIT 2 -

到目前为止，我已经设法使用以下部分进行fadeIn过渡。

<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选择器匹配的类

Answer 1

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

将悬停事件绑定到您可以执行的每个锚点

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

   //comes here upon hover
});

执行fadeIn或fadeOut或animate。下面是超级简单的代码。

 <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的动画

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

你必须将文本和背景图像分开，即保留在锚点下面的任何其他元素的背景图像。

Answer 2

你可以使用css过渡和jQuery作为后备。以下是一些帮助链接：

Answer 3

The Js code is below :

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

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

    },function(){});

第一个函数在hoverin上调用，第二个函数在hoverout上调用。

您需要包含一个jquery-latest：

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

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

jQuery fadeIn / fadeOut在导航菜单中的（a＆amp; a：hover）？

3 个答案: