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>
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments