1

我一直在努力尝试使用下面的 Jquery 代码来实现简单的颜色淡入淡出。当用户将鼠标移到链接上时，我基本上是在尝试激活“悬停”类。目前，代码不起作用，但我希望它能说明我想要完成的工作。

任何帮助将不胜感激！

谢谢

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Untitled Document</title>

<style>

#menu-name li {
    color: black;
    text-shadow: 0px 1px 4px #777;
    background-color: green;
    width: 200px;
}

#menu-name li .hover {
    background: orange;
}
</style>

<script type="text/javascript"?>
$(document).ready(function(){ 

    //Set the anchor link opacity to 0 and begin hover function
    $("#menu-name li a").hover(function(){ 

        //Fade to an opacity of 1 at a speed of 200ms
        $(this).find('.hover').stop().animate({"opacity" : 1}, 300); 

        //On mouse-off
        }, function(){

        //Fade to an opacity of 0 at a speed of 100ms
        $(this).find('hover').stop().animate({"opacity" : 0}, 200); 

    });

});
</script>

</head>
<script src="jquery-1.9.1.js"></script>
<body>

<div id="menu-container">
<ul id="menu-name">
    <li class="hover"><a href="#">Health Care</a></li>
    <li class="hover"><a href="#">Love</a></li>
</ul>
</div>


</body>
</html>
4

1 回答 1

1

我创建了一个 jsFiddle 来解决您的问题：http: //jsfiddle.net/kAW65/

其实有两个问题：

  1. 您淡入/淡出的方式不正确
  2. 你不应该在 li 元素上有“悬停”类；相反（我认为），您想从“a”元素中添加/删除它

更正的JS：

$(document).ready(function(){ 

//Set the anchor link opacity to 0 and begin hover function
$("#menu-name li a").hover(function(){ 

    //Fade to an opacity of 1 at a speed of 200ms
    //$(this).find('.hover').stop().animate({"opacity" : 100}, 300); 
    $(this).fadeOut(0).addClass('hover').fadeIn(300);

    //On mouse-off
    }, function(){

    //Fade to an opacity of 0 at a speed of 100ms
    $(this).fadeOut(300)
     .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });

});
});

更正的 HTML：

<div id="menu-container">
<ul id="menu-name">
<li><a href="#">Health Care</a></li>
<li><a href="#">Love</a></li>
</ul>
</div>

对于淡入淡出的代码，我引用了这个答案：fade in/out hover by jQuery

于 2013-08-24T20:32:17.980 回答