Ball Dropping jquery
How do I make an ball dropping jquery?
What is a ball dropping jquery? How do you make a ball dropping jquery? This script and codes were developed by Brendan Skousen on 09 December 2022, Friday.
Ball Dropping jquery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ball Dropping jquery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body> <button id="btnShow">Show</button> <button id="btnHide">Hide</button>
<img id="chrome-ball" src="https://cdn1.iconfinder.com/data/icons/free-colorful-icons/128/chrome.png"
style="position:fixed;left:50%;bottom:500px;opacity:0;z-index:1000" /> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Ball Dropping jquery - Script Codes JS Codes
jQuery.easing.easeOutBounce = function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
};
var ball = $('#chrome-ball');
$('#btnShow').click(function(){
// Pass the name of the easing function as a third argument
ball.stop().animate({opacity:1, bottom: 0}, 1000, 'easeOutBounce');
// Don't forget to stop() before starting animations
});
$('#btnHide').click(function(){
ball.stop().animate({opacity:0, bottom: 500});
});
Developer | Brendan Skousen |
Username | bskousen |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 1,850 Kb |
Views | 8,096 |
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 |
Disable Copy of Text without Javascript | 1,578 Kb |
Responsive Green Accordion | 3,031 Kb |
A Pen by Brendan Skousen | 2,954 Kb |
CSS3 Warp Shadow | 2,271 Kb |
Responsive blocks with box-sizing | 2,802 Kb |
Nivo Slider Dark Theme | 2,562 Kb |
Testimonial fade in and out | 2,067 Kb |
Give me money | 3,232 Kb |
Wallpaper.js demo | 1,573 Kb |
Simple jQuery Slideshow | 2,089 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 |
PNotify Demo | Adittmar | 1,731 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
STIKHOI | Denmch | 7,122 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
SCSS Social Icons Flat | Mattsince87 | 3,482 Kb |
Login-ng-modal | Heedoo | 3,566 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!