var $li = $("#contents > li"); var $h1 = $("#contents h1"); var $p = $("#contents p"); var nextAnim; $("#menu > li").click(function() { var prevPos = $("#menu > li.on").removeClass().index(); var nowPos = $(this).addClass("on").index(); setTimeout(function() { clearTimeout(nextAnim); $li.eq(prevPos).removeClass(); nextAnim = setTimeout(function() { $li.eq(nowPos).addClass("on"); }, 550); }, 1); });
<nav> <ul id="contents"> <li class="on"> <h1>our works</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p> </li> <li> <h1>we serve</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p> </li> <li> <h1>get in touch</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p> </li> <li> <h1>we do crazy stuff</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p> </li> <li> <h1>working things</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p> </li> <ul id="menu"> <li class="on">portfolio</li> <li>services</li> <li>contact</li> <li>experiments</li> <li>applications</li> </ul> </ul> </nav>
* { margin: 0; padding: 0; } ul, ol { list-style-type: none; } nav { position: relative; margin: 0 auto; top: 100px; width: 800px; height: 300px; border: 3px solid #fff; box-shadow: 0px 0px 3px #000; } #contents { position: absolute; width: 100%; height: 100%; overflow: hidden; background-color: #000; } #contents > li { position: absolute; width: 100%; height: 100%; opacity: 0; transition: all .5s; } #contents > li h1 { position: relative; padding: 30px; font-size: 50px; color: #fff; text-shadow: -1px 1px 3px #000000; text-transform: uppercase; left: -100%; transition: all .5s; } #contents > li p { position: absolute; bottom: -200px; width: 450px; padding-left: 30px; padding-bottom: 20px; border: 3px solid #000; border-top-right-radius: 5px; background-color: rgba(0, 0, 0, 0.8); color: #fff; opacity: 0.8; transition: all .5s; } #contents > li.on { opacity: 1; } #contents > li.on h1 { left: 0px; } #contents > li.on p { bottom: 0px; } #menu { position: absolute; right: 0; text-transform: uppercase; } #menu > li { position: relative; right: -30px; width: 230px; height: 45px; margin-bottom: 10px; text-indent: 15px; line-height: 40px; font-size: 20px; color: #fff; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px 0 0 20px; cursor: pointer; opacity: 0.8; transition: all .3s; } #menu > li:hover { text-shadow: 0px 0px 2px #fff; } #menu > li.on { right: 0; text-shadow: 0px 0px 2px #fff; opacity: 1; } #contents > li:nth-child(1) { background: url(http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/1.jpg); } #contents > li:nth-child(2) { background: url(http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/2.jpg); } #contents > li:nth-child(3) { background: url(http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/3.jpg); } #contents > li:nth-child(4) { background: url(http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/4.jpg); } #contents > li:nth-child(5) { background: url(http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/5.jpg); }