任何想法如何优化我的菜单小的Jquery代码？

Question

I have 3 divs(#carta1,#carta2 and #carta3) that are hidden (display:none), each one with different information. When the user goes over a navigation bar the corresponding div is shown.
It works fine but i think its to much code.. is there any way to make it simpler(for example to use only 1 function)?

thanks for the help!

here´s my Jquery code:

$("#frueh, #carta1").hover(function (e) {
        e.preventDefault();
        $("#carta1").stop().fadeIn();   
     }, 
        function(){
        $("#carta1").stop().fadeOut(750);
});



$("#sup, #carta2").hover(function (e) {
        e.preventDefault();
        $("#carta2").stop().fadeIn(); 
     }, 
        function(){
        $("#carta2").stop().fadeOut(500);
});


$("#sal, #carta3").hover(function (e) {
        e.preventDefault();
        $("#carta3").stop().fadeIn();   
     }, 
        function(){
        $("#carta3").stop().fadeOut(750);
});

and here´s the Html list:

<ul id="speise">
                <li><a id="frueh"  href="">Frühstück</a></li>
                <li><a id="sup"    href="">Suppen</a></li>
                <li><a id="sal"    href="">Salate</a></li>
</ul>

Answer 1

Whenever you have repeated code like that, it's usually a sign that you could put it into a function.

function registerHoverListener(triggerElementId, displayElementId, fadeoutTime) {
    var fadeIn = function(e) {
        e.preventDefault();
        $(displayElementId).stop().fadeIn();
    };

    var fadeOut = function() {
        $(displayElementId).stop().fadeOut(fadeoutTime);
    };

    $(triggerElementId, displayElementId).hover(fadeIn, fadeOut);
});

registerHoverListener("#sup, #carta2", 500);
registerHoverListener("#sal, #carta3", 750);
registerHoverListener("#frueh, #carta1", 750);

You may be able to remove the fadeoutTime param if you only want it to be 750 in all the cases. I didn't know if that 500 was a typo.

Answer 2

thataustin's answer works well, another option would be to target down to your ul children, then grab the id from the event. Something like:

$("#speise > li > a").hover(function (e) {
    e.preventDefault();
    alert(e.target.id);
 });

Then you could make data tags or target children further to perform your desired actions, depending on where #carta1 , #carta2 , and #carta3 are located.

Again, Austin's answer is easier to implement and easier to read, just food for thought.