2011-06-22 14 views
2

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

<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> 

答えて

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(); 
});   
}); 
+0

のために望む何を与えるべき書き換えたバージョンである、あなたは、私はそれの一部をやったウル答え – Neal

+0

を変更しました。それから私は悪く感じました。 Meh。それから5人が答えを書きました。だからうまい。 :) –

0

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

$(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/

4

あなたはリソースと時間を無駄に同じ要素に対して複数回同じコンテキスト$(この)、あなたは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(); 
0

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

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'); 
}); 
1

のみいくつかの値があります。 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'); 
}); 

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

+0

みんなありがとう!これは今よりずっと意味をなさない。 – david

0

あなたは猫:-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> 
関連する問題