jQuery.animate examples

This page is about the a list of test and examples of jQuery.animate plugin, which is the rewrite of the original jQuery.animate's default behavior. The priority use CSS3 Transition to achieve the animations.

Set CSS transformer properties

CSS transform translate x

	$("#btntranslatex").click(function(){
		$("#translatex").css({ x: '100px' });       
	});

CSS transform translate y

	$("#btntranslatey").click(function(){
		$("#translatey").css({ y: '100%' });         
	});

CSS transform translate: x and y

	$("#btntranslate1").click(function(){
		$("#translate1").css({ translate: [200,100] });         
	});

CSS transform translate3d

	$("#btntranslate3d").click(function(){
		$("#translate3d").css({ translate: [200,100] });         
	});

CSS transform scale

	$("#btnscale").click(function(){
		$("#scale").css({ scale: 2 });         
	});

CSS transform scaleX

	$("#btnscaleX").click(function(){
		$("#scaleX").css({ scaleX: 3 });         
	});

CSS transform scaleY

	$("#btnscaleY").click(function(){
		$("#scaleY").css({ scaleY: 3 });         
	});

CSS transform scale3d

	$("#btnscale3d").click(function(){
		$("#scale3d").css({ scale3d: [2, 1.5, 4] });       
	});

CSS transform rotate

	$("#btnrotate").click(function(){
		$("#rotate").css({ rotate: '30deg' });        
	});

CSS transform rotateX

	$("#btnrotateX").click(function(){
		$("#rotateX").css({ rotateX: 45 });              
	});

CSS transform rotateY

	$("#btnrotateY").click(function(){
		$("#rotateY").css({ rotateY: '1rad' });          
	});

CSS transform rotateZ

Hello

	$("#btnrotateZ").click(function(){
		$("#rotateZ").css({ rotateZ: 90 });                  
	});

CSS transform rotate3d

	$("#btnrotate3d").click(function(){
		$("#rotate3d").css({ rotate3d: [60,30,90] });                   
	});

CSS transform skewX

Hello

	$("#btnskewX").click(function(){
		$("#skewX").css({ skewX: '30deg' });                 
	});

CSS transform skewY

Hello

	$("#btnskewY").click(function(){
		$("#skewY").css({ skewY: 60 });                  
	});

CSS transform skew

Hello

	$("#btnskew").click(function(){
		$("#skew").css({ skew: [30,60] });                   
	});

Animate

hide and show

	$("#btnhide").click(function(){
		$("#hide").hide(1000);                  
	});

slideDown

	$("#btnhideslideDown").click(function(){
		$("#hideslideDown").hide().slideDown(1000, 'easeOutBack');                
	});

fadeIn

	$("#btnfadeIn").click(function(){
		$("#hidefadeIn").hide().fadeIn(2000, function() {alert("OK") });            
	});

animate left

	$("#btnanimateleft").click(function(){
		$("#animateleft").animate({left: 100});            
	});

animate x

	$("#btnanimatex").click(function(){
	  $("#animatex").animate({x: 200}, 1000, 'easeOutBack', function() {
		$(this).html("OK"); 
		});         
	});

animate left top

	$("#btnanimatelefttop").click(function(){
		$("#animatelefttop").animate({
			left: [100, 'linear'],
			top: [200, 'easeOutBack'],
			scale: [[2,3], 'easeInBack']
		});
	});

animate left top + animation styles for both directions

	$("#animatelefttopstyle").animate({
		left: 100,
		top: 200
		},{
		queue: false,
		duration: 2000,
		specialEasing: {
			left: 'linear',
			top: 'easeOutBack'
		}
});

Animate: opacity

	$("#btnanimate1").click(function(){
		$("#animate1").animate({opacity: 0},{
			queue: false,
			duration: 2000,
			easing: 'linear'
		});
	});

Animate Compound Properties

Animate: border-radius

	$("#btnborder-radius").click(function(){
		$("#border-radius").animate({ 'border-radius': '25px 25px 25px 25px' });		
	});

Animate: box-shadow

	$("#btnbox-shadow").click(function(){
		$("#box-shadow").animate({ 'box-shadow': 'inset 10px 10px 5px #ddd'});	
	});

Animate: stop

	$("#btnfinish").click(function(){
	$("#finish").animate({ x: 300 }, 2000, 'easeInOutBack');
	});	

	$("#btnfinishstop").click(function(){
		$("#finish").stop();
		})