1

5つの要素を含む標準ulリストがあります。li3番目の要素の後に、CSSクラスを使用してリストにボタンを配置しました.morecats。

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

jQueryを使用して、最初の3つのli要素を非表示にしました。

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

liここで、ユーザーがボタンにカーソルを合わせたときに、jQueryをフェードインして、非表示の要素を表示したいと思います.morecats。.bgまた、フェードイン/表示するために呼び出される別のdivが欲しいです。

これはどのように達成できますか？

4

2 に答える 2

2

これを実現する1つの方法は、jQueryホバー関数を使用することです。公式の例には、フェードインとフェードアウトの例もあります。

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

スライスは最後の2つのli要素を取得します。

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

于 2012-12-24T05:41:40.147 に答える
1

あなたは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.
);
于 2012-12-24T06:20:11.650 に答える