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 |
A Pen by Rob | 1,972 Kb |
Table filters | 1,727 Kb |
Bootstrap test | 1,906 Kb |
Get combo box item value | 1,981 Kb |
Responsive Calendar | 2,460 Kb |
Html5 form validation | 2,090 Kb |
Filter inputs | 1,721 Kb |
Jquery form | 2,920 Kb |
Nav Menu with Chevron | 1,966 Kb |
D3 test | 2,395 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 |
Light Switch | Bartuc | 4,933 Kb |
Flip test | Madhes | 1,635 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Tail rose iris lined | Kbrtrm | 1,846 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Starfield using KineticJS | Asp | 3,512 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Comment Jquery | SquishyAndroid | 2,421 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!