Changing Page With Jquery

medicaxsas

New Member
So I'm trying to use hashes to animate from page to page. The first page that loads (home) fades in and out perfectly, but the page I'm trying to get to, test (look at hash stuff), won't animate/load at all. Why is this?\[code\]<!DOCTYPE html><html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <title>Jack Cook</title> <style> #navbar ul { list-style-type: none; display: block; text-align: center; } #navbar ul li { display: inline-block; } #navbar img { width: 64px; height: 64px; padding: 0 10px 0 10px; } #navbar a img:hover { opacity: 0.4; } </style> <script type="text/javascript"> $(document).ready(function () { pages = { "home": ["Home", "This is my homepage!", "<p>Homepage</p>"], "test": ["Test", "This is a testing page", "<p>Testing</p>"] }; page = window.location.hash != "" ? window.location.hash.substr(3) : "home"; update(page); $(document).on("click", "a", function() { if ($(this).attr("href").substr(0, 4) != "http") { event.preventDefault(); window.location.hash = "!/" + $(this).attr("href"); } }); $(window).on("hashchange", function () { $("body").fadeOut(1000, function () { update(window.location.hash); }); }); }); function update(page) { $("body").css("display", "none"); $("#content").html(pages[page][2]); $("body").fadeIn(2000); } </script> </head> <body> <div id="navbar"> <ul> <li><a href="http://stackoverflow.com/questions/15915123/test"><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></a></li> <li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li> </ul> </div> <div id="content"></div> </body></html>\[/code\]
 
Top