jQuery隐藏li元素，然后在按钮悬停时淡入答案

【问题标题】：jQuery hide li elements, then fade in on button hoverjQuery隐藏li元素，然后在按钮悬停时淡入
【发布时间】：2012-12-24 05:35:58
【问题描述】：

我有一个标准的ul 列表，其中包含五个li 元素。在第三个元素之后，我在列表中放置了一个带有 CSS 类 .morecats 的按钮。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <button class="morecats">+</button>
    <li>4</li>
    <li>5</li>
</ul>

使用 jQuery，我隐藏了前三个 li 元素：

$('ul')
  .find('li:gt(3)')
  .hide()
  .end();

现在，当用户将鼠标悬停在按钮 .morecats 上时，我希望 jQuery 淡入并显示隐藏的 li 元素。我还想要一个名为 .bg 的单独 div 来淡入/出现。

如何做到这一点？

【问题讨论】：

按钮不能是 UL 的子元素..html 无效
啊……但是在所有浏览器中？我敢打赌 IE 的版本不喜欢它。您要求出现意外行为
始终坚持使用有效的 html。 ul 只能有 lis 作为孩子
你必须使用 Opacity 最初设置为 0 并将其设置为动画直到 1
@RakeshJuyal 你没有读过其他 6 个关于有效 html 的 cmets 吗？

标签： javascript jquery

【解决方案1】：

实现此目的的一种方法是通过jQuery hover function。官方的例子甚至还有淡入淡出的例子，你可以看看。

$(".morecats").hover(
    function(){   // When the hover begins
        $('li').slice(-2).fadeIn(500);
    }, 
    function(){   // When the hover ends
        $('li').slice(-2).fadeOut(500);
    } 
);

切片获取最后两个li 元素。

Jsfiddle：http://jsfiddle.net/wDLVQ/2/

【讨论】：

【解决方案2】：

你可以通过prevAll()jQuery函数实现：

您可以在此处阅读更多信息 - http://api.jquery.com/prevAll/

$('ul')
.find('li:lt(3)')
.hide();           //<----------------------------first 3 li hidden

$(".morecats").hover(
    function(){
        $(this).prevAll('li').fadeIn(500); // when hover the button fadeIn the 
        $('.bg').fadeIn(500);              // hidden li and .bg div.
    },
    function(){ 
        $(this).prevAll('li').fadeOut(500); // used it to fadeout the first 3
    }                                       // lis again.
);

【讨论】：