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

Question

我有一个标准的 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 淡入/出现。

这是如何实现的？

Answer 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/