Question

我有一个带按钮的简单导航：

<ul class="nav">
    <a href="#" class="active">
        <li>Home</li>
    </a>
    <a href="#">
        <li>About</li>
    </a>
    <a href="#">
        <li>Products</li>
    </a>
    <a href="#">
        <li>Reviews</li>
    </a>
    <a href="#">
        <li>Contacts</li>
    </a>
</ul>

我在dom加载后选择所有元素：

$(document).ready(function){
    // select all a's
    $("ul a").hover(function(){
         $(this).animate({opacity:0.5},250);
    },function(){
         $(this).animate({opacity:1},250);
    })
}

我的jquery功能只选择前三个a＆＃39;并且不会在悬停时设置其余样式。谁知道什么可能是错的？所有的a都是相对的，所以我可以用不透明度来设置它们。

Answer 1

你的html结构错了。根据{{3}}，li代码中不允许使用<a>个代码。

您应该将li与ul直接相关：

<ul class="nav">
    <li><a href="#" class="active">Home</a>
    </li>
    <li>
        <a href="#">About</a>
    </li>
    <li>
        <a href="#">Products</a>
    </li>
    <li>
        <a href="#">Reviews</a>
    </li>
    <li>
        <a href="#">Contacts</a>
    </li>
</ul>

另外，您可能想查看$(document).ready sintax：

$(document).ready(function(){
    $("ul a").hover(function(){
         $(this).animate({opacity:0.5},250);
    },function(){
         $(this).animate({opacity:1},250);
    });
});

工作小提琴：this article

建议：

你应该考虑使用css过渡。它比Jquery轻很多。您只需添加以下内容即可解决问题：

ul a:hover {
    transition: 0.25s;
    opacity: 0.5;
}

见这里：http://jsfiddle.net/37tk4fx6/

Answer 2

评论就是答案。我会澄清答案。

你必须把你的李包裹在你的元素周围，而不是你现在拥有的。

然后将$（＆＃39; ul a＆＃39;）更改为$（＆＃39; ul li a＆＃39;）。

甚至更好的$（＆＃39; ul＆＃39;）。找到（＆＃39; li＆＃39;）。找到（＆＃39; a＆＃39;），这是一个巨大的性能提升jQuery的。

jquery不会为所有选定元素设置动画

2 个答案: