jQuery / Javascript - else if statement not reaching else if -
i'm relatively new jquery / javascript i've come across looks simple snag solve, , can't see what's wrong. sorry if ends being simple i've searched loads no end.
i'm trying various divs fade in or out depending on whether 'visible' or not. divs 'pages' want advance when 'next' arrow clicked.
here's jquery:
$(document).ready(function(){ $("#page1 > div").hide(); $("#page2 > div").hide(); $("#page3 > div").hide(); $("#page1 > div").fadein(800); $("#nextarrow").click(function(){ if($("#page1").is(":visible")){ $("#page1 > div").fadeout(800); $("#page2 > div").fadein(800); } else if($("#page2").is(":visible")){ $("#page2 > div").fadeout(800); $("#page3 > div").fadein(800); } else { alert("no page"); } }) })
here html:
<table id="maintable" width="765" border="0" align="center"> <tr> <td align="left" valign="top" style="min-height:400px; padding-left:10px; padding-top:10px"> <div id="page1" style="position:absolute"> <div id="p1title">introduction</div> <p></p> <div id="p1detail">....detail.....</div> </div> <div id="page2" style="position:absolute"> <div id="p2title">introduction - continued</div> <p></p> <div id="p2detail">....detail.....</div> </div> <div id="page3" style="position:absolute"> <div id="p3title">members</div> <p></p> <div id="p3detail">....detail.....</div> </div> </td> </tr> <tr> <td align="right"> <div id="nextarrow"></div> </td> </tr> </table>
here css "nextarrow":
#nextarrow { width:120px; height:34px; background-image:url('nextarrow.gif'); } #nextarrow:hover { background-image:url('nextarrowhover.gif'); }
so here's problem. when click 'nextarrow' div fades 'page1' div out expected , fades in 'page2' div. however, when click again nothing happens, not getting 'no page' alert.
your answer trivial logical issue. fadeout
fades out element - not parent. :visible
check checks state of container specified - not parent.
you fading out #page1 > div
, not #page1
. such, while empty, #page1
still visible. such, $('#page1').is(':visible')
true regardless of state of page.
consider changing fadeout/fadein calls fade page ids , not containing divs.
Comments
Post a Comment