JQuery Animations

Developer
Size
3,190 Kb
Views
40,480

How do I make an jquery animations?

A few animations done with jQuery. The finale uses a recursion to paint the screen with rainbow stripes.. What is a jquery animations? How do you make a jquery animations? This script and codes were developed by Rob on 30 August 2022, Tuesday.

JQuery Animations Previews

JQuery Animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Animations</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="square" class="origin"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Animations - Script Codes CSS Codes

#square { position: absolute; width: 40px; height: 40px;
}
.origin {	margin: auto;	background-color: red;
}

JQuery Animations - Script Codes JS Codes

/*	Step one is to move the box into the top left corner, so I just supplied new	absolute positioning coordinates to the jquery.animate function	After the animation is complete, it removes the old styling and sets the	background color Then it binds the next function to the box
*/
function stepOne(event) { var $this = this;	this.animate({	top: 0,	left: 0,	}, { duration: 300, done: function() { $this.removeClass(); $this.css('background-color', 'orange'); } });
}
/*	Step two sends the box to the top right corner while rotating it	using the step option of the animate function
*/
function stepTwo() { var $this = this;	this.animate({	left: $(document).width() - this.width(),	rotation: 360	}, { duration: 600,	done: function(){	$this.css('background-color', 'yellow');	},	step: function(now, fx) { $this.css({'transform': 'rotate(' + now + 'deg)'}); }	});
}
/*	Step three shrinks the box into the upper right corner by forcing the	left position coordinate to increase as the box shrinks. To get the box	to grow out of the corner, first shove the box into the corner, then make	the left coordinate shrink as the box grows
*/
function stepThree() { var $window = $(window); var $this = this;	this.animate({	height: 0,	width: 0,	left: $window.width()	},	{	duration: 500,	done: function() { $this.css({ top: $window.height(), right: 0, backgroundColor: 'green' });	$this.animate({	height: 40,	width: 40,	top: $window.height() - 40,	left: $window.width() - 40,	right: 40	});	}	});
}
function stepFour() { var $this = this; this.fadeOut(400, function() { $this.css('background-color', 'blue'); $this.fadeIn(400); });
}
/*	Adjusts the top and left coordinate and the border radius to make the	square into a circle while moving it to the center of the window
*/
function stepFive() { var $window = $(window); var $this = this;	this.animate({	top: $window.height() / 2 - this.height() / 2,	left: $window.width() / 2 - this.width() / 2,	borderRadius: 40	},	{	duration: 300,	done: function() {	$this.css('background-color', 'purple');	}	});
}
/*	Creates an array of 6 circles (theoretically more) and passes the array to	the animator function
*/
function stepSix() {	var circles = [];	circles.push(this.css('background-color', 'red').hide());	circles.push(this.clone().css('background-color', 'orange').appendTo('body'));	circles.push(this.clone().css('background-color', 'yellow').appendTo('body'));	circles.push(this.clone().css('background-color', 'green').appendTo('body'));	circles.push(this.clone().css('background-color', 'blue').appendTo('body'));	circles.push(this.clone().css('background-color', 'purple').appendTo('body'));	animateCirclesToStripes(circles, 0, circles.length)();
}
/* This function recursively animates the circles given to it in order Each animation waits until the previous one is done before starting I hid all the circles before passing them through to keep the idle ones out of the way during each animation. I used recursion to keep the code clean, because using the 'done' property too many times sequentially gets messy
*/
function animateCirclesToStripes($elArray, count, maxStripes) {	if($elArray.length === 0) {	return false;	} var $window = $(window);	return function() {	var $shape = $elArray.shift();	var stripeSpace = Math.floor(count / maxStripes * $window.height());	var stripeHeight = Math.ceil($window.height() / maxStripes);	var iteration = count;	$shape.show();	$shape.animate({	borderRadius: 0,	top: stripeSpace,	left: 0,	width: $window.width(),	height: stripeHeight	},	{	done: animateCirclesToStripes($elArray, ++count, maxStripes)	});	}
}
function clickHandler($elm) { var animations = [stepOne, stepTwo, stepThree, stepFour, stepFive, stepSix]; var $this = $elm; return function() { animations.shift().call($this); if(animations.length === 0) { $this.unbind('click'); } }
}
/*	find the box on the screen and bind the first animation function to it
*/
$('document').ready(function() {	var $box = $('#square'); var $window = $(window);	$box.on('click', clickHandler($box));	$box.css({	'top': $window.height() / 2 - 20,	'left': $window.width() / 2 - 20	});
});
JQuery Animations - Script Codes
JQuery Animations - Script Codes
Home Page Home
Developer Rob
Username rowinf
Uploaded August 30, 2022
Rating 3
Size 3,190 Kb
Views 40,480
Do you need developer help for JQuery Animations?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob (rowinf) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!