Hi! My name is Thuzar San and I am now working as a Web Designer at Spiceworks Myanmar Co., Ltd.Today, I would like to share about some of the jQuery animations and effects. The purpose of jQuery is to make JavaScript much easier to use on your website.  jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The Topics are :

１. jQuery Effects : slide , fade and animate

２. Capturing and Programming for Mouse Events

３. Basic DOM Traversal with jQuery

４. Creating a Drop-down Menu with jQuery

５. Creating an Accordion Menu with jQuery UI

jQuery Effects

The excellent CSS-based animation effects .Use jQuery effects for adding animation to a web page. For example, Sliding , Fading and performing custom animations of other CSS properties.

There are three commands for sliding elements ,
1. slideUp( );

$('#slideMe').slideUp();

2. slideDown( );

$('#slideMe').slideDown('slow');

3. slideToggle( );

$('#slideMe').slideToggle('fast');

 

Two primary fading commands in jQuery ,
1. fadeIn ( ) – fades the element to full opacity.

$('#fadeMe').fadeIn('');

2. fadeOut ( ) – reduces the opacity of the element to nothing.

$('#fadeMe').fadeOut('slow');

For the effects you can use the argument ‘slow’ and ‘fast’ .
– argument ‘slow’ , which is equivalent to 600ms.
– argument ‘fast’ , which is equivalent to 200ms.
– no argument which is equal to 400ms. you can also specify a custom time length.

1000 milliseconds = 1 second

If you want to learn more about jQuery effects Click Here!

---

Capturing and Programming for Mouse Events 

click( ) – lets you attach custom functionality to the click event of the chosen element  a <div>, <button> or any other element.

$('#myDiv').click(function(e){ } );

hover( ) – Actually, this interaction consists of two events, first the mouse is moved over the element .mouseenter , and then the mouse leaves the element .mouseleave .
jQuery’s hover event combines these two events in one jQuery method.

$('#myDiv').hover(function(e){ }, function(e){ } );

If you want to learn more about mouse events Click Here!

---

Basic DOM Traversal with jQuery

Document Object Model that allows programs and scripts to dynamically access and update the content, structure, and style of a document.The fundamental structure of the DOM is a tree.

DOM methods are actions you can perform on HTML Elements. DOM properties are values of HTML Elements that you can set or change.

$('#myDiv').parent('div').text();

$('#myDiv').children('div').text();

---

Creating a Drop-down Menu with jQuery

A drop-down menu with jQuery, HTML, and CSS.

HTML Code

 <!-- in the head tag -->
 <meta charset="utf-8">
 <!-- host jquery from google or locally. I host it from google -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- in the body tag -->
<!-- drop down menu -->
<div id="menuDemo"> 
 <ul class="nav">
 <li id="homeMenu"><a href="#menuHome">JquerySample</a>
 </li>
 <li><a href="#">Effects</a>
 <ul>
 <li><a href="#">Sliding</a></li>
 <li><a href="#">Fading</a></li>
 <li><a href="#">Animation</a></li>
 </ul>
 </li>
 <li><a href="#">Events</a>
 <ul>
 <li><a href="#">Click</a></li>
 <li><a href="#">Hover</a></li>
 </ul>
 </li>
 <li><a href="#"></a>DOM</li>
 <li><a href="#">Menu</a>
 <ul>
 <li><a href="#">Drop down menu</a></li>
 <li><a href="#">Accordion Menu</a></li>
 </ul>
 </li>
 </ul>
 <div class="clear"></div>
 </div>
<!-- drop down menu -->

CSS Code

/*drop down menu*/
body{
     background:#1e2e3b;
     color: #fff;
     margin:0;
     padding: 0;
     font-weight: normal;
 }
 .nav li{
     float: left;
     width: 150px;
     text-align: center;
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
div#menuDemo { 
	position: relative;
	color: #3aafa9;	
	margin-bottom: 50px;
}
div#menuDemo > ul > li {
	float: left;
}

div#menuDemo ul li {
	background: #fff;
	color: #3aafa9;
	margin-right: 10px;
	padding: 5px 0;
}

div#menuDemo ul li a {
	text-decoration: none;
	color: #3aafa9;	
}

div#menuDemo > ul > li > ul {
	display: none;
	margin: 0;
	padding: 0;
	position: absolute;
}

div#menuDemo > ul > li:hover > ul {
	display: block;
	width: 150px;
	text-align: center;
}

div#menuDemo .nav{
	margin:0;
	padding: 0;
}
/*drop down menu*/

JS Code

//drop down menu    

    $('div#menuDemo > ul > li').hover(function() {
        //effect when the user hovers over the menu
    $(this).children('ul').hide().slideDown();
    }, function() {
        //effect when the user leaves the current menu - fade out
        $(this).children('ul').fadeOut();
    });

---

Creating an Accordion Menu with jQuery UI

The accordion menu is one of the nicer UI elements that jQuery UI provides.It consists of multiple rows, each of which has a title, and any of them can be expanded to reveal the inner content of that item – but generally, only one row can be expanded at a time.

//To Use accordion menu  you need to include the jQuery UI js and css.
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="css/jquery-ui.css">

$( "#accordion" ).accordion();

You can download the Jquery UI Here!
Reference from www.jquerysample.com

Thank You!