列表中的 jQuery 选择器 <li>答案

【问题标题】：jQuery Selectors in list <li>列表中的 jQuery 选择器 <li>
【发布时间】：2009-09-05 01:34:29
【问题描述】：

谁能用 jQuery 选择器给我建议。

我有一个 HTML 列表（见下文），其中包含四个标志图像。当用户滚动一个标志时，例如意大利，我希望它淡出所有其他三个标志到 50% 的不透明度。

<ul id="flags">
    <li id="German"><img src="images/flag_german.jpg" /></li>
    <li id="Italian"><img src="images/flag_italian.jpg" /></li>
    <li id="Spanish"><img src="images/flag_spanish.jpg" /></li>
    <li id="French"><img src="images/flag_french.jpg" /></li>
</ul>

【问题讨论】：

标签： jquery css-selectors

【解决方案1】：

试试这个：

$(function() {
    $('#flags li').hover(function() {
        $(this).siblings().stop(true).animate({opacity:'0.5'},1000);
    }, function() {
        $(this).siblings().stop(true).animate({opacity:'1'},1000);
    });
});

使用 stop 可以帮助防止出现滚动很多元素并且它们已经排队动画的状态。它清除队列中元素的所有当前动画并分配新的动画。

您需要使用 animate 而不是 fadeIn 和 fadeOut 的原因是因为 weird bug with fadeIn/fadeOut and the hover event。还没有弄清楚是什么导致了这个错误。

【讨论】：

+1 用于悬停，当您停止悬停在整个集合上时不会让元素褪色。

【解决方案2】：

这样的东西怎么样（未测试）

   $("#flags li").mouseover(function(){
      var id = this.id;
      $("#flags li").not("#"+id).animate({opacity:'0.5'},1000);
      $(this).animate({opacity:'1'},1000);
    });

【讨论】：

干杯...让我试试吧！ rgds D
我刚刚修正了一个错字。解决方案都是 mkoryak
如果你快速滚动所有的li，你会看到它继续淡化，即使你停止移动鼠标。在这种情况下，我的答案将正常工作。
太好了。这就是我一直在寻找的。span>

【解决方案3】：

$('#flags li').bind('mouseover', function() {
    $('#flags li').not($(this)).fadeTo('fast', 0.5);
}).bind('mouseout', function() {
    $('#flags li').show();
});

【讨论】：

【解决方案4】：

您可能想查看siblings selector。

【讨论】：

谢谢大家！让它工作，看起来很棒！迫不及待想跟上 jQuery 的速度！ ...太奇妙了！再次感谢 Decbrad