Revision: 37057
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at December 3, 2010 04:08 by delineo
Initial Code
<script type="text/javascript"> // explore nav animation $(document).ready(function () { // set up explore nav animation $("#aniExplore li:eq(0)").css("left", "0px"); $("#aniExplore li:eq(1)").css("left", "200px"); $("#aniExplore li:eq(2)").css("left", "400px"); $("#aniExplore li:eq(3)").css("left", "600px"); $("#aniExplore li:eq(4)").css("left", "800px"); $("#aniExplore li:eq(5)").css("left", "1000px"); $("#aniExplore li:eq(6)").css("left", "1200px"); $("#aniExplore li:eq(7)").css("left", "1400px"); $("#aniExplore li:eq(8)").css("left", "1600px"); $("#aniExplore li:eq(9)").css("left", "1800px"); // moves nav left $("#navExploreLeftButton").click(function () { if ($("#aniExplore li").is(':animated')) { return false; } $("#aniExplore li").animate({ left: "-=200px" }, 200, CheckPositionLeft()); }); function CheckPositionLeft() { $("#aniExplore li").each( function () { if ($(this).css("left") == "-200px") { $(this).css("left", "1800px"); }; if ($(this).css("left") == "600px") { FocusOn(this); }; if ($(this).css("left") == "400px") { FocusOff(this); }; } ); }; // moves nav right $("#navExploreRightButton").click(function () { if ($("#aniExplore li").is(':animated')) { return false; } $("#aniExplore li").animate({ left: "+=200px" }, 200, CheckPositionRight()); }); function CheckPositionRight() { $("#aniExplore li").each( function () { if ($(this).css("left") == "1800px") { $(this).css("left", "-200px"); }; if ($(this).css("left") == "200px") { FocusOn(this); }; if ($(this).css("left") == "400px") { FocusOff(this); }; } ); }; // increases text/image size on central item function FocusOn(item) { $(item).children("a").children("img").animate({ width: "125px", height: "125px", left: "37px", top: "0px" }, 100); $(item).children("a").children("span").animate({ fontSize: "12px" }, 200); } // decreases text/image size on central item function FocusOff(item) { $(item).children("a").children("img").animate({ width: "90px", height: "90px", left: "55px", top: "35px" }, 100); $(item).children("a").children("span").animate({ fontSize: "9px" }, 200); } }); </script> <div id="navExplore"> <ul id="aniExplore"> <li><img src="/images/pic-explore-support.gif" alt="Support" /><span>Support</span></li> <li><img src="/images/pic-explore-wellbeing.gif" alt="Wellbeing" /><span>Wellbeing</span></li> <li><img src="/images/pic-explore-keep-learning.gif" alt="Keep learning" /><span>Keep learning</span></li> <li><img src="/images/pic-explore-support.gif" alt="Support" /><span>Support</span></li> <li><img src="/images/pic-explore-wellbeing.gif" alt="Wellbeing" /><span>Wellbeing</span></li> <li><img src="/images/pic-explore-keep-learning.gif" alt="Keep learning" /><span>Keep learning</span></li> </ul> <ul id="navExploreButtons"> <li id="navExploreLeftButton"><</li> <li id="navExploreRightButton">></li> </ul> </div>
Initial URL
http://openbolton.co.uk/explore-your-life/
Initial Description
Initial Title
Animated custom navigation
Initial Tags
navigation
Initial Language
jQuery