jQuery的隱藏li元素，然後淡入按鈕懸停

我有一個標準ul列表，它包含五個li元素。在第三個元素之後，我在CSS類.morecats的列表中放置了一個按鈕。jQuery的隱藏li元素，然後淡入按鈕懸停

<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當用戶將鼠標懸停在按鈕上.morecats淡入並顯示隱藏li元素。我還想要一個名爲.bg的單獨div來淡入/出現。

這怎麼可能實現呢？

來源

2012-12-24 Andy Dwyer

按鈕不能UL的孩子..無效html – charlietfl

它的工作雖然 –

啊......但在所有的瀏覽器？我敢打賭IE的版本不喜歡它。您要求意外的行爲 – charlietfl

一種方式來實現，這將是通過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/

來源

2012-12-24 05:41:40

謝謝你的答案 - 完美的工作 –

您可以通過prevAll() jQuery的功能achive它：

你可以在這裏閱讀更多 - 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. 
);

來源

2012-12-24 06:20:11 Jai

jQuery的隱藏li元素，然後淡入按鈕懸停

回答

相關問題