Posted By

cpres on 09/07/11

Tagged

Versions (?)

Last Edited at 09/07/11 06:12am

Statistics

Viewed 678 times

Favorited by 0 user(s)

Related snippets

PERL & JQuery Product Animation

/ Published in: jQuery

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.

Highlighted TextExpand

$(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>

}, 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>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.