Advanced Search

Return to Snippet

Revision: 18742
at October 7, 2009 03:24 by teedy
Initial Code 
<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-->
Initial URL 
http://cirrostratusco.com/ransom_a-price-menu.php
Initial Description 
Hovering over a ransomTab animates in the ransomStrip of the same index
Initial Title 
Ransom, a simple  jQuery tab menu with animation
Initial Tags 
animation
Initial Language 
jQuery