Thursday, 22 August 2013

How to simplify this code using cycle

How to simplify this code using cycle

Hi I have this code which simply show/hide some absolute positioned divs.
This code is ok but very long. How can I simplify this code? Some cycle is
way, but I don´t know how dynamically write this. I mean this is easy
question.
JQUERY code:
$(document).ready(
function() {
$("#vysuv_obal_1").hover(function() {
$("#vysuv_1").fadeIn(1500);
$("#vysuv_2").fadeOut(750);
$("#vysuv_3").fadeOut(750);
$("#vysuv_4").fadeOut(750);
});
$("#vysuv_obal_2").hover(function() {
$("#vysuv_1").fadeOut(750);
$("#vysuv_2").fadeIn(1500);
$("#vysuv_3").fadeOut(750);
$("#vysuv_4").fadeOut(750);
});
$("#vysuv_obal_3").hover(function() {
$("#vysuv_1").fadeOut(750);
$("#vysuv_2").fadeOut(750);
$("#vysuv_3").fadeIn(1500);
$("#vysuv_4").fadeOut(750);
});
$("#vysuv_obal_4").hover(function() {
$("#vysuv_1").fadeOut(750);
$("#vysuv_2").fadeOut(750);
$("#vysuv_3").fadeOut(750);
$("#vysuv_4").fadeIn(1500);
});
});
HTML:
<div class="ctvrtina_menu_hp_popup" id="vysuv_obal_1">
<div id="vysuv_1" class="ctvrtina_vysuv" style="display:none;">
<h2 class="nadpis_menu_hp_popup"><a href="#">Sjezdové
lyžování</a></h2>
<div class="ctvrtina_in2">
<a href="#"><span
class="polozka_menu_hp_popup">1Sjezdové
lyže</span></a>
</div>
</div>
<h2 class="nadpis_menu_hp_popup"><a href="#">Sjezdové
lyžování</a></h2>
<div class="ctvrtina_in">
<a href="#"><span class="polozka_menu_hp_popup">Sjezdové
lyže</span></a>
</div>
<a href="#"><span class="tl_menu_hp_popup">Více info</span></a>
</div>
<div class="ctvrtina_menu_hp_popup" id="vysuv_obal_2">
<div id="vysuv_2" class="ctvrtina_vysuv" style="display:none;">
<h2 class="nadpis_menu_hp_popup"><a href="#">Sjezdové
lyžování</a></h2>
<div class="ctvrtina_in2">
<a href="#"><span
class="polozka_menu_hp_popup">2Sjezdové
lyže</span></a>
</div>
</div>
<h2 class="nadpis_menu_hp_popup"><a href="#">Bìžecké
lyžování</a></h2>
<div class="ctvrtina_in">
<a href="#"><span class="polozka_menu_hp_popup">Sjezdové
lyže</span></a>
</div>
<a href="#"><span class="tl_menu_hp_popup">Více info</span></a>
</div>
etc...
class="ctvrtina_vysuv" => absolute positioned div
class="ctvrtina_menu_hp_popup" => relative positioned div

No comments:

Post a Comment