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/

実際には次の 2 つの問題があります。

  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>

フェード コードについては、この回答を参照しました: jQuery によるフェード イン/アウト ホバー

于 2013-08-24T20:32:17.980 に答える