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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -