jQuery simple .fadeIn demo not working for me -
why not work? have been sitting here hours confused... works in jsfiddle http://jsfiddle.net/5shdr/8/
<!doctype html> <html> <head> <style> body { padding:0; margin:0; } #menu { width:100%; background-color:#ddd; } #menu .link { display:inline-block; margin-left:5px; margin-right:5px; padding:5px; cursor:pointer; } #menu .link.active { color:blue; } #main { padding:5px; } #main .content { display:none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $('.link').click(function () { if ($(this).hasclass('active')) return false; var name = $(this).attr('id'); var $visible = $('#main .content:visible'); $('.active').removeclass('active'); $(this).addclass('active'); if ($visible.length == 0) showcontent(name); else $visible.fadeout(500, function () { showcontent(name); }); }); function showcontent(name) { $('#main .' + name).fadein(500); } </script> </head> <body> <div id="menu"> <div class="link" id="home">home</div> <div class="link" id="blog">blog</div> <div class="link" id="about">about</div> </div> <div id="main"> <div class="home content">this home content.</div> <div class="blog content">this blog content.</div> <div class="about content">this content.</div> </div> </body> </html> is there simple missing?
your script not inside dom ready, in fiddle in left hand side panel second dropdown have selected onload means script in script panel executed on window load event.
jquery(function($){ $('.link').click(function () { console.log('x') if ($(this).hasclass('active')) return false; var name = $(this).attr('id'); var $visible = $('#main .content:visible'); $('.active').removeclass('active'); $(this).addclass('active'); if ($visible.length == 0) showcontent(name); else $visible.fadeout(500, function () { showcontent(name); }); }); }) demo: plunker
Comments
Post a Comment