Jquery 悬停时的淡入/淡出标签

我有两个带标签的区域。当我在某个区域悬停时，我想更改该区域中标签的颜色，使其更加突出，并在我未悬停的区域中淡出其他标签

我怎么做交换

$("li").hover(function(){
    $(this).find(".label").fadeOut(100);
});

---

您应该将两个函数传递给

。hover

。第一个将用作mouseover的回调，第二个用于mouseout：

$("li").hover(
    function(){
        $(this).find(".label").fadeOut(100);
    },
    function(){
        $(this).find(".label").fadeIn(100);
    }
);

---

通常将两个函数传递到

.hover（）

。第一个是

mouseover

功能，第二个是

mouseout

功能

JS--

CSS--

.stop（）

将允许用户快速鼠标悬停，但动画不会一直运行，如果用户鼠标悬停，则会创建一个动画队列。我将

.fadeTo（）

与

.stop（）

一起使用，因为如果使用

.fadeOut（）

/

.fadeIn（）

当用户鼠标快速移动时，动画可能会中断

.fadeTo（）

的另一个优点是，我们仅对元素的

不透明度设置动画，因此元素仍保留其在屏幕上的位置（即元素不会四处跳跃）

下面是一个演示：

.hover（）
的文档：
我为您创建了这个示例。
它使用无序列表，其中包含淡入/淡出的标记

<ul>
    <li><span>1st.</span> list item</li>
    <li><span>2nd.</span> list item</li>
    <li><span>3dr.</span> list item</li>
    <li><span>4th.</span> list item</li>
    <li><span>5th.</span> list item</li>
    <li><span>6th.</span> list item</li>
    <li><span>7th.</span> list item</li>
</ul>​

悬停LI元素时，子跨度将淡入100%，同级LI的子跨度将淡入50%

$('ul').mouseleave(function(){
    $('span', this).animate({opacity: 1}, 150);
})​

当您离开父UL元素时，所有跨度元素都会恢复，动画设置为100%

这是一个有效的例子。。。
请张贴您的标记。。如果将鼠标快速移到列表项上，可以创建一个动画队列，看起来每个标签都在闪烁。
label {
    opacity : 0;
    filter  : alpha(opacity=0);
}​

<ul>
    <li><span>1st.</span> list item</li>
    <li><span>2nd.</span> list item</li>
    <li><span>3dr.</span> list item</li>
    <li><span>4th.</span> list item</li>
    <li><span>5th.</span> list item</li>
    <li><span>6th.</span> list item</li>
    <li><span>7th.</span> list item</li>
</ul>​

$('li').mouseenter(function(){
    $('span', this).stop().animate({opacity:1}, 150)
    $('span', $(this).siblings('li')).stop().animate({opacity:0.3}, 150)
})

$('ul').mouseleave(function(){
    $('span', this).animate({opacity: 1}, 150);
})​