このjavascriptをより効率的に書くことはできますか？

Question

私はこれらの2つの機能を使用して、ナビゲーションバー上の別々のドロップの高さを制御しています。それは働いているが、私はそれが一つの関数として書かれていると確信している...私はちょうど方法を知らない。おかげで任意の提案を事前に：

<script type="text/javascript"> 
function nav() { 
    $('.nav li').hover(function() { 
    $(this).find('ul.item1_sub').show(); 
    $(this).find('ul.item1_sub').stop().animate({ 
     height: '145px', 
     opacity: '100' 
    }, { 
     queue: false, 
     duration: 200, 
     easing: 'easeInSine' 
    }) 
    }, function() { 
    $(this).find('ul.item1_sub').stop().animate({ 
     height: '0px', 
     opacity: '0' 
    }, { 
     queue: false, 
     duration: 100, 
     easing: 'easeInCirc' 
    }) 
    }); 
}; 
$(document).ready(function() { 
    nav(); 
}); 

function nav2() { 
    $('.nav li').hover(function() { 
    $(this).find('ul.item2_sub').show(); 
    $(this).find('ul.item2_sub').stop().animate({ 
     height: '170px', 
     opacity: '100' 
    }, { 
     queue: false, 
     duration: 200, 
     easing: 'easeInSine' 
    }) 
    }, function() { 
    $(this).find('ul.item2_sub').stop().animate({ 
     height: '0px', 
     opacity: '0' 
    }, { 
     queue: false, 
     duration: 100, 
     easing: 'easeInCirc' 
    }) 
    }); 
}; 
$(document).ready(function() { 
    nav2(); 
}); 
</script> 

Answer 1

私はあなたのページが

$(function() { 
    $('.nav li').hover(function(){ 
    $(this).find('ul.item1_sub, ul.item2_sub').slideDown(); 
},function(){ 
    $(this).find('ul.item1_sub, ul.item2_sub').slideUp(); 
});   
}); 

Answer 2

のように見えるものではなく、車輪の再発明のjQueryのslideUpとslideDownを使用してみてください知らなくても、このようなものとなるだろう。

$(document).ready(function() { 

    $('.nav li').hover(function(){ 
     $(this).find('ul.item1_sub, ul.item2_sub').slideDown(); 
    },function(){ 
     $(this).find('ul.item1_sub, ul.item2_sub').slideUp(); 
    }); 

}); 

フィドル：http://jsfiddle.net/maniator/Laa7G/

Answer 3

あなたはリソースと時間を無駄に同じ要素に対して複数回同じコンテキスト$（この）、あなたはjQueryの関数$を（使うたび）に使用されています。あなたはそれをvariabileに張り付けて、その時点からそのvariabileを参照する必要があります。

var $this = $(this); 

また、これが2回使用されています

$(this).find('ul.item2_sub') 

は

var $this = $(this); 
var $items = $this.find('ul.item2_sub'); 

$items.show(); 
$items.stop().animate(); 

Answer 4

ただ、正確性をチェックされていない、一般化することが必要です。

function nav(item, height){ 
$('.nav li').hover(function() { 
$(this).find(item).show(); 
    $(this).find(item).stop().animate({height:height, opacity: '100'},{queue:false, duration:200, easing: 'easeInSine'}) 
     }, function() { 
    $(this).find(item).stop().animate({height: '0px',opacity: '0'},{queue:false, duration:100, easing: 'easeInCirc'}) 
     }); 
    }; 
    $(document).ready(function() { 
    nav('ul.item1.sub, '145px'); 
    nav('ul.item2.sub', '170px'); 
}); 

Answer 5

のみいくつかの値があります。 2つのf私が見る限りでは、君主制。あなたが本当に一つの機能にこれらをリファクタリングしたい場合は、次に、関数

function nav(item, height) { 
    $('.nav li').hover(function() { 
    $(this).find(item).show(); 
    $(this).find(item).stop().animate({ 
     height: height, 
     opacity: '100' 
    }, { 
     queue: false, 
     duration: 200, 
     easing: 'easeInSine' 
    }) 
    }, function() { 
    $(this).find(item).stop().animate({ 
     height: '0px', 
     opacity: '0' 
    }, { 
     queue: false, 
     duration: 100, 
     easing: 'easeInCirc' 
    }) 
    }); 
}; 

を定義し、必要であればあなたはまた、より多くのパラメータを追加することができ、適切なパラメータ

$(document).ready(function() { 
    nav('ul.item1_sub', '145px'); 
    nav('ul.item2_sub', '170px'); 
}); 

でそれを呼び出すことができます。ここで

Answer 6

あなたは猫:-Pをコピー.... :)

<script type="text/javascript"> 

function onMouseOver() { 
    var self = $(this), 
     item1_sub = self.find('ul.item1_sub'), 
     item2_sub = self.find('ul.item2_sub'), 
     animOptions = { queue: false, duration: 200, easing: 'easeInSine' }; 

    item1_sub.show().stop().animate({ height: '145px', opacity: '100' }, animOptions); 
    item2_sub.show().stop().animate({ height: '170px', opacity: '100' }, animOptions); 

} 

function onMouseOut() { 
    $(this).find('ul.item1_sub, ul.item2_sub').stop().animate({ height: '0px', opacity: '0' }, { queue: false, duration: 100, easing: 'easeInCirc' }); 
} 


function onDomReady() { 
    $('.nav li').hover(onMouseOver, onMouseOut); 
} 


$(onDomReady); 

</script>