/ Published in: jQuery
Hovering over a ransomTab animates in the ransomStrip of the same index
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<script> $(function(){ // Document is ready $('.ransomStrip').not('.ransomStrip:eq(0)').animate({left: '-400px'}); $('.ransomTab:eq(0)').addClass('ransomTabActive'); $('.ransomTab').hover(function(){ var indy = $('.ransomTab').index(this); $(this).addClass('ransomTabActive'); $('.ransomTab').not(this).removeClass('ransomTabActive'); $('.ransomStrip').not('.ransomStrip:eq('+indy+')').animate({left: '-400px'}); $('.ransomStrip:eq('+indy+')').animate({left: '0px'}); }); }); </script> </head> <body class=""> <h1>Ransom <em>by Cirrostratus Design Company</em></h1> <h2>A jQuery-powered tab menu inspired by iStockphoto.com</h2> <div id="ransom"> <div id="ransomMain"> </div><!--ransomMain--> <div id="ransomTabs"> <div class="ransomTab"> <p>Web</p> </div><!--ransomTab--> <div class="ransomTab"> <p>Illustrations</p> </div><!--ransomTab--> <div class="ransomTab"> <p>Video</p> </div><!--ransomTab--> </div><!--ransomTabs--> <div class="ransomStrip" id="Web"> <div class="ransomPrice"> <p>$10</p> <small>web</small> </div><!--ransomPrice--> <div class="ransomPrice"> <p>$20</p> <small>web</small> </div><!--ransomPrice--> <div class="ransomPrice"> <p>$40</p> <small>web</small> </div><!--ransomPrice--> <div class="ransomPrice"> <p>$50</p> <small>web</small> </div><!--ransomPrice--> </div><!--ransomStrip--> <div class="ransomStrip" id="Illustrations"> <div class="ransomPrice"> <p>$5</p> <small>ill</small> </div><!--ransomPrice--> <div class="ransomPrice"> <p>$30</p> <small>ill</small> </div><!--ransomPrice--> <div class="ransomPrice"> <p>$40</p> <small>ill</small> </div><!--ransomPrice--> <div class="ransomPrice"> <p>$60</p> <small>ill</small> </div><!--ransomPrice--> <div class="ransomPrice"> <p>$90</p> <small>ill</small> </div><!--ransomPrice--> </div><!--ransomStrip--> <div class="ransomStrip" id="Video"> <div class="ransomPrice"> <p>$15</p> <small>vid</small> </div><!--ransomPrice--> <div class="ransomPrice"> <p>$25</p> <small>vid</small> </div><!--ransomPrice--> <div class="ransomPrice"> <p>$50</p> <small>vid</small> </div><!--ransomPrice--> </div><!--ransomStrip--> </div><!--ransom-->
URL: http://cirrostratusco.com/ransom_a-price-menu.php