<style type="text/css">
	#sportheader-top {
		background: transparent url([% tag('ig_cache_image_url') %][% image_dir %][% bg_images.get_random_element | html %]) no-repeat;
		height:633px;
		width:727px;
	}
</style>

<script type="text/javascript">

    $(function () {
        $('.more-bar a').click(function () {
            $(this.hash).slideToggle(1500);
            $(this).parent().toggleClass("active");
            return false;
        });

    });
    $(function () {
        $('div.trigger').click(function () {
            $(this.parent).toggleClass("active");
        });
    });
</script>

<script type="text/javascript">
$(document).ready(function(){
    
     $("div.trigger").toggle(function(){
          $(this).addClass("active"); 
          }, function () {
          $(this).removeClass("active");
     });
	 
	$("ul.thumb li").hover(function() {
    $(this).css({
        'z-index': '10'
    });
	$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
        .animate({
            marginTop: '-45px',
            /* The next 4 lines will vertically align this image */
            marginLeft: '-45px',
            top: '40%',
            left: '40%',
            width: '75px',
            /* Set new width */
            height: '75px',
            /* Set new height */
            padding: '10px'
        }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

    }, function() { 
	$(this).css({
        'z-index': '0'
    });
	$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
        .animate({
            marginTop: '0',
            /* Set alignment back to default */
            marginLeft: '0',
            top: '1%',
            left: '1%',
            width: '45px',
            /* Set width back to default */
            height: '45px',
            /* Set height back to default */
            padding: '0px'
        }, 400);
    });
	
    $("ul.thumb li.head a").click(function() {
		apparel_init();
        $(".head_title").show();
		var mainHead = $(this).attr("href"); //Find Image Name
		var mainHeadTitle = $(this).attr("title"); //Find Product Title
		var mainHeadLink = $(this).attr("alt"); //Find Product Link
		_gaq.push(['_trackEvent', '[% sportanalytics %]', 'Thumb-Click', mainHeadTitle]);
        $(".head_title").html("<a class=sportprod href='"+mainHeadLink+"'>"+mainHeadTitle+"</a>");
		$("#main_head a").attr({ href:mainHeadLink });
        $("#main_head img").attr({
            src: mainHead
        });
		return false;
    });	
    $("ul.thumb li.app a").click(function() {
		apparel_init();
        $(".app_title").show();
        var mainApp = $(this).attr("href"); //Find Image Name
		var mainAppTitle = $(this).attr("title"); //Find Product Title
		var mainAppLink = $(this).attr("alt"); //Find Product Link
		_gaq.push(['_trackEvent', '[% sportanalytics %]', 'Thumb-Click', mainAppTitle]);
        $(".app_title").html("<a class=sportprod href='"+mainAppLink+"'>"+mainAppTitle+"</a>");
		$("#main_app a").attr({ href:mainAppLink });
        $("#main_app img").attr({
            src: mainApp
        });
        return false;
    });	
    $("ul.thumb li.pant a").click(function() {
		apparel_init();
        $(".pant_title").show();
        var mainPant = $(this).attr("href"); //Find Image Name
		var mainPantTitle = $(this).attr("title"); //Find Product Title
		var mainPantLink = $(this).attr("alt"); //Find Product Link
		_gaq.push(['_trackEvent', '[% sportanalytics %]', 'Thumb-Click', mainPantTitle]);
        $(".pant_title").html("<a class=sportprod href='"+mainPantLink+"'>"+mainPantTitle+"</a>");
		$("#main_pant a").attr({ href:mainPantLink });
        $("#main_pant img").attr({
            src: mainPant
        });
        return false;
    });
	$(".clearproducts").click(function() {
		_gaq.push(['_trackEvent', '[% sportanalytics %]', 'Clear-Click']);
		$("#main_apparel").removeClass('lighten');
		$(".clearproducts").hide();
		$(".pant_title").hide();
		$(".app_title").hide();
		$(".head_title").hide();
		$("#main_head img").attr({ src:"[% tag('ig_cache_image_url') %][% image_dir %]/clear.gif" });
		$("#main_app img").attr({ src:"[% tag('ig_cache_image_url') %][% image_dir %]/clear.gif" });
		$("#main_pant img").attr({ src:"[% tag('ig_cache_image_url') %][% image_dir %]/clear.gif" });
	});
	
	function apparel_init() {
		$("#main_apparel").addClass('lighten');
		$(".clearproducts").show();
		$("#start-sport").hide();
		$("#left-wrap").show();
		$("#main_pant").show();
	}
	
	var scrolling = null;
	var slideleft = $("#slidearea-left");
	var slideright = $("#slidearea-right");

	$("#slidedown-left").hover(function scroll_down() {
		slideleft.animate({scrollTop: (slideleft.scrollTop() + slideleft.position().top)},600);
		scrolling = window.setTimeout(function() {
			scroll_down();
		}, 500);
	}, function() {
		window.clearTimeout(scrolling);
		});

	$("#slideup-left").hover(function scroll_up() {
		slideleft.animate({scrollTop: (slideleft.scrollTop() - slideleft.position().top)},600);

		scrolling = window.setTimeout(function() {
			scroll_up();
		}, 500);
	}, function() {
		window.clearTimeout(scrolling);
		});	
		 
	$("#slidedown-right").hover(function scroll_down() {
		slideright.animate({scrollTop: (slideright.scrollTop() + slideright.position().top)},600);
		scrolling = window.setTimeout(function() {
			scroll_down();
		}, 500);
	}, function() {
		window.clearTimeout(scrolling);
		});

	$("#slideup-right").hover(function scroll_up() {
		slideright.animate({scrollTop: (slideright.scrollTop() - slideright.position().top)},600);

		scrolling = window.setTimeout(function() {
			scroll_up();
		}, 500);
	}, function() {
		window.clearTimeout(scrolling);
    });
	 $("#spinner").hide();
	 $("#thumb-holder").show();
});

</script>

This was for a "Sport Landing Page" where people can select their outfits. There is intial intro box that gets cleared on the first selection. The thumbnails popout on hover. And there is a clear function that takes out all the products selected to just show the background image.

PERL & JQuery Product Animation

jquery, perl, animation

jQuery