jQuery can implement a lot of animation from simple to complex. This article will show you some examples about how to implement hover, click, hide, show, collapse and menu tree animation in jQuery.
1. jQuery Hover And Click Animation.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/OHMpv0eWBpA.
hover-click.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Hover Click Animation Example</title>
<script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// When mouse hover on li.
$("#hoverUl > li").hover(function () {
// Change color and pointer when hover in.
$(this).css({color:'red', background:'yellow', cursor:'pointer'});
},function () {
// Change color back when hover out.
$(this).css({color:'black', background:'white'});
});
// When click on li.
$("#hoverUl > li").click(function () {
alert($(this).text());
});
});
</script>
<style type="text/css">
.center {
margin-top: 30px;
text-align: center;
list-style-type: none}
.padding {
padding:10px;
}
</style>
</head>
<body>
<ul id="hoverUl" class="center">
<li class="padding">JavaScript</li>
<li class="padding">Angular</li>
<li class="padding">Node JS</li>
</ul>
</body>
</html>
2. jQuery Hide And Show Animation.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/FNabE0ekpzU.
hide-show.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Hide Show Animation Example</title>
<script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// When click hide/show div button.
$("#showHideDiv").click(function () {
// Get div display attribute value.
var display = $(".div")[0].style.display;
if(display=='none')
{
$(".div").show(1000);
}else
{
$(".div").hide(1000);
}
});
// When click hide/show image button.
$("#showHideImage").click(function () {
// Get image jquery object.
var image = $("img");
// Toggle image display state.
image.toggle('slow');
});
});
</script>
<style type="text/css">
.div {
width: 100px;
height: 100px;
background: yellow;
color: blue;
margin-bottom: 10px;
}
</style>
</head>
<div class="div"></div>
<button id="showHideDiv" style="display: block">Hide/Show Above Div</button>
<img src="../images/green_button.jpg" />
<button id="showHideImage" style="display: block">Hide/Show Above Image</button>
</body>
</html>
3. jQuery Collapse Animation.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/k2PEpxmPjPw.
collapse.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Collapse Animation Example</title>
<style type="text/css">
.ul{
list-style-type: none;
}
.title{
font-size: medium;
}
.desc{
font-size: small;
}
</style>
<script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// Define an array to save html element show hide status.
var display = [];
// Get title element array.
var titleArray = $(".title");
// Get description element array.
var descArray = $(".desc");
// When hover on title then change the mouse pointer.
titleArray.hover(
function () {
$(this).css('cursor', 'pointer');
}
);
// Loop for all title element.
titleArray.each(function (index) {
// Record whether display related description or not.
display[index] = true;
var titleItem = titleArray[index];
var params = {};
params.index = index;
// When click title.
$(titleItem).click(params, function () {
var visible = display[params.index];
var descItem = descArray[params.index];
if(visible)
{
$(descItem).hide('fast');
display[index] = false;
}else
{
$(descItem).show('fast');
display[index] = true;
}
});
});
});
</script>
</head>
<body>
<ul class="ul">
<li class="title">JavaScript</li>
<li class="desc">JavaScript is a script language which can create client side web application.</li>
</ul>
<ul class="ul">
<li class="title">Java</li>
<li class="desc">Java is a programming language which can create server side application.</li>
</ul>
<ul class="ul">
<li class="title">Node JS</li>
<li class="desc">Node JS is a platform that can use javascript to create server side app.</li>
</ul>
</body>
</html>
4. jQuery Menu Tree Animation.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/mOc8i9sG2P8.
menu-tree.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Menu Tree Animation Example</title>
<script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// When click li that contains ul child tag.
$('li:has(ul)').click(function (event) {
if(this == event.target) {
var children = $(this).children();
var visible = !children.is(':hidden');
if (visible) {
children.hide();
} else {
children.show();
}
}
}).hover(function () {
$(this).css('cursor','pointer');
});
});
</script>
<style type="text/css">
.ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul class="ul">
<li>
Home
</li>
<li>
News
<ul class="ul">
<li>Tech News</li>
<li>Insider News</li>
</ul>
</li>
<li>
Test
<ul class="ul">
<li>Auto Test</li>
<li>Menu Text</li>
</ul>
</li>
<li>
Programming
<ul class="ul">
<li>Java</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</body>
</html>
