JQuery Animations
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 - 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 });
});
Developer | Rob |
Username | rowinf |
Uploaded | August 30, 2022 |
Rating | 3 |
Size | 3,190 Kb |
Views | 40,480 |
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!
Name | Size |
Nav Menu with Chevron | 1,966 Kb |
Foundation Off-Canvas menu test | 2,424 Kb |
Jquery form | 2,920 Kb |
Flash Cards | 3,086 Kb |
Get combo box item value | 1,981 Kb |
Html5 form validation | 2,090 Kb |
Filter inputs | 1,721 Kb |
A Pen by Rob | 3,452 Kb |
Site Layout | 3,219 Kb |
Bootstrap test | 1,906 Kb |
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!
Name | Username | Size |
A cube | KyleDavidE | 18,627 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Toggle Time | Petebot | 5,345 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!