1

ホバリング時に上下のスライド効果を作成するjQueryスニップがあります。私はこのフィドルでそれを作りました: http://jsfiddle.net/jPneT/1/

今、私はそのようなナビゲーションを持っています:

<nav id="menu" class="nav">                 
            <ul>
                <li>
                    <a href="#">
                        <div class="slide default">
                            <span>About</span>
                        </div>
                        <div class="slide onhover">
                            <span>About</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="slide default">
                            <span>Photography</span>
                        </div>
                        <div class="slide onhover">
                            <span>Photography</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="slide default">
                            <span>Home</span>
                        </div>
                        <div class="slide onhover">
                            <span>Home</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="slide default">
                            <span>Webdesign</span>
                        </div>
                        <div class="slide onhover">
                            <span>Webdesign</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="slide default">
                            <span>Linkbase</span>
                        </div>
                        <div class="slide onhover">
                            <span>Linkbase</span>
                        </div>
                    </a>
                </li>
            </ul>
        </nav>

フィドルから効果を追加するために、次のような jQuery パーツを作成しました。

$(document).ready(function(){

            var height = $(".nav ul li").height();

            $('li:nth-child(5n+1)').mouseover(function(){
                $('li:nth-child(5n+1) .default').stop().animate({
                    height: 0    
                }, height);                        
            }).mouseout(function(){
                $('li:nth-child(5n+1) .default').stop().animate({
                    height: height 
                }, height)    
            });
            $('li:nth-child(5n+2)').mouseover(function(){
                $('li:nth-child(5n+2) .default').stop().animate({
                    height: 0    
                }, height);                        
            }).mouseout(function(){
                $('li:nth-child(5n+2) .default').stop().animate({
                    height: height 
                }, height)    
            });
            $('li:nth-child(5n+2)').mouseover(function(){
                $('li:nth-child(5n+2) .default').stop().animate({
                    height: 0    
                }, height);                        
            }).mouseout(function(){
                $('li:nth-child(5n+2) .default').stop().animate({
                    height: height 
                }, height)    
            });
            $('li:nth-child(5n+2)').mouseover(function(){
                $('li:nth-child(5n+2) .default').stop().animate({
                    height: 0    
                }, height);                        
            }).mouseout(function(){
                $('li:nth-child(5n+1) .default').stop().animate({
                    height: height 
                }, height)    
            });
            $('li:nth-child(5n+1)').mouseover(function(){
                $('li:nth-child(5n+1) .default').stop().animate({
                    height: 0    
                }, height);                        
            }).mouseout(function(){
                $('li:nth-child(5n+1) .default').stop().animate({
                    height: height 
                }, height)    
            });

        });

それは正常に動作します。しかし、jQuery コードは冗長で長いです。しかし、私はそれを改善してスリムにするという考えはありません。

ソリューションは古いブラウザと互換性があるはずなので、移行用の jQuery にする必要があります...

アイデアはありますか？

4

1 に答える 1

0

あなたのコードを完全に理解しているかどうかはわかりませんが（nth-childがすべてあるため）、次のように短くできると思います：

$('li').hover(function(){
    $(this).find('.default').stop().animate({
        height: height    
    }, height);                  
}, function(){
    $(this).find('.default').stop().animate({
        height: 0    
    }, height);
})

を使用しhoverて、イベントの数を 1 に減らします。最初の最初の関数はマウスの入力に似ており、2 番目の関数はマウス アウトに似ています。

thisどの要素がホバーされているかを知るために使用できます。

于 2013-05-24T13:25:58.890 に答える