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();

現在，我想的jQuery淡入並顯示被隱藏的li元素，當用戶將鼠標懸停在按鈕.morecats 。 我還想要一個名為.bg的單獨div來淡入/出現。

怎么可以實現呢？

Answer 1

實現此目的的一種方法是通過jQuery懸停功能 。 官方的例子甚至還有淡入淡出的例子，你可以看一下。

$(".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/

Answer 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.
);