Question

我一直在努力尝试使用下面的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>

Answer 1

我创建了一个修复问题的jsFiddle：http://jsfiddle.net/kAW65/

实际上有两个问题：

您正在淡入/淡出的方式不正确
你不应该在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

简单的Jquery颜色淡入

1 个答案: