Question

我有一个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用于过渡...

你有什么想法吗？

Answer 1

我不确定完全理解你的代码（因为所有那些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来了解该元素是否悬停。

改进冗余jQuery代码的方法

1 个答案: