i have 3 boxes when hover show description. code working fine expected. however, want make jquery code shorter revised on won't work expected , don't see difference of code.
here html part:
<div id="opf-container"> <div class="s-box-container"> <div class="s-box" id="cc-home-pr"> <div class="normal" style="display: block;"> <span><h2>xxx</h2></span> </div> <div class="hover" style="display: none;"> <h2>xxx</h2> <hr class="hr-mid"> <p>lorem epsum</a></span></p> <a href="#" id="btn2-lm" class="btn2">learn more</a> </div> </div> </div> <div class="s-box-container"> <div class="s-box" id="cc-home-ps"> <div class="normal" style="display: block;"> <span><h2>xxx</h2></span> </div> <div class="hover" style="display: none;"> <h2>xxxx</h2> <hr class="hr-mid"> <p>lorem epsum</a></span></p> <a href="#" id="btn2-lm" class="btn2">learn more</a> </div> </div> </div> <div class="s-box-container"> <div class="s-box" id="cc-home-ft"> <div class="normal" style="display: none;"> <span><h2>xxx</h2></span> </div> <div class="hover" style="display: block;"> <h2>lorem epsum</h2> <hr class="hr-mid"> <p>lorem epsum<span class="highlight-w"><a href="#">become member</a></span> of cardschat forum access exclusive freerolls , online poker games & tournaments</p> <a href="#" id="btn2-lm" class="btn2">learn more</a> </div> </div> </div> </div>here jquery code:
var timer1; $("#cc-home-pr").hover(function() { cleartimeout(timer1); $("#cc-home-pr .hover").fadein(300); $("#cc-home-pr .normal").fadeout(300); }, function() { boxid = '#' + $(this).attr('id'); timer1 = settimeout(function() { $("#cc-home-pr .hover").fadeout(300); $("#cc-home-pr .normal").fadein(300); }, 300); }); var timer2; $("#cc-home-ps").hover(function() { cleartimeout(timer2); boxid = '#' + $(this).attr('id'); $("#cc-home-ps .hover").fadein(300); $("#cc-home-ps .normal").fadeout(300); }, function() { boxid = '#' + $(this).attr('id'); timer2 = settimeout(function() { $("#cc-home-ps .hover").fadeout(300); $("#cc-home-ps .normal").fadein(300); }, 300); }); var timer3; $("#cc-home-ft").hover(function() { cleartimeout(timer3); boxid = '#' + $(this).attr('id'); $("#cc-home-ft .hover").fadein(300); $("#cc-home-ft .normal").fadeout(300); }, function() { boxid = '#' + $(this).attr('id'); timer3 = settimeout(function() { $("#cc-home-ft .hover").fadeout(300); $("#cc-home-ft .normal").fadein(300); }, 300); }); the jquery code above working fine. decided make shorter revised code this:
var timerbox = []; $("div.s-box-container", this).hover(function() { boxindex = $(this).index(); cleartimeout(timerbox[boxindex]); boxid = '#' + $(".s-box",this).attr('id'); $(boxid + " .hover").fadein(300); $(boxid + " .normal").fadeout(300); }, function() { timerbox[boxindex] = settimeout(function() { $(boxid + " .hover").fadeout(300); $(boxid + " .normal").fadein(300); }, 300); }); however in code when won't work expected when hover box other box won't restore original state.
try indexing collection of timers id of inner .s-box:
var timerbox = []; $("div.s-box-container").hover(function() { var boxid = $(".s-box",this).attr('id'); cleartimeout(timerbox[boxid]); $("#" + boxid + " .hover").fadein(300); $("#" + boxid + " .normal").fadeout(300); }, function() { var boxid = $(".s-box",this).attr('id'); timerbox[boxid] = settimeout(function() { $("#" + boxid + " .hover").fadeout(300); $("#" + boxid + " .normal").fadein(300); }, 300); }); edit: removed this $("div.s-box-container") selector , added fiddle reference.
Comments
Post a Comment