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。第一个函数类似于鼠标进入，第二个函数是鼠标退出。

您可以使用this来知道哪个元素被悬停。

于 2013-05-24T13:25:58.890 回答