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.\u00a0 jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.<\/p>\n
The Topics are :<\/em><\/p>\n \uff11.\u00a0<\/span>jQuery Effects : slide , fade and animate<\/span><\/em><\/p>\n \uff12.<\/span>\u00a0Capturing and Programming for Mouse Events<\/span><\/em><\/p>\n \uff13.\u00a0<\/span>Basic DOM Traversal with jQuery<\/span><\/em><\/p>\n \uff14.<\/span>\u00a0Creating a Drop-down Menu with jQuery<\/span><\/em><\/p>\n \uff15.<\/span>\u00a0Creating an Accordion Menu with jQuery UI<\/span><\/em><\/p><\/blockquote>\n 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.<\/p>\n There are three commands for sliding elements ,<\/strong> 2. slideDown( );<\/p>\n 3. slideToggle( );<\/p>\n <\/p>\n Two primary fading commands in jQuery ,<\/strong> 2. fadeOut ( ) – reduces the opacity of the element to nothing.<\/p>\n For\u00a0the effects you can use the\u00a0argument ‘slow’ and ‘fast’ . 1000 milliseconds = 1 second<\/span><\/p><\/blockquote>\n If you want to learn more about jQuery effects\u00a0Click Here!<\/a><\/span><\/p>\n click( ) – lets you attach custom functionality to the click event of the chosen element\u00a0 a <div>, <button> or any other element.<\/p>\n hover( ) – Actually, this interaction consists of two events, first the mouse is moved over the element .mouseenter<\/em> , and then the mouse leaves the element .mouseleave<\/em> . If you want to\u00a0learn more about mouse events\u00a0Click Here!<\/a><\/span><\/p>\n 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.<\/p>\n DOM methods\u00a0<\/em><\/span>are\u00a0actions\u00a0you can perform on HTML Elements. DOM properties\u00a0<\/em><\/span>are\u00a0values of HTML Elements that you can set or change.<\/p>\n A drop-down menu with jQuery, HTML, and CSS.<\/p>\n HTML Code<\/p>\n CSS Code<\/p>\n JS Code<\/p>\n 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.<\/p>\n You can download the Jquery UI\u00a0Here!<\/span><\/a> Thank You!<\/p>\n","protected":false},"excerpt":{"rendered":" Hi! My name is Thuzar San and I am now working as a Web Designer at Spiceworks Myanmar Co., Ltd.Today,<\/p>\n","protected":false},"author":29,"featured_media":1389,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,1],"tags":[],"class_list":["post-711","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-system"],"yoast_head":"\njQuery Effects<\/strong><\/h3>\n
\n1. slideUp( );<\/p>\n$('#slideMe').slideUp();<\/pre>\n$('#slideMe').slideDown('slow');<\/pre>\n$('#slideMe').slideToggle('fast');<\/pre>\n
\n1. fadeIn ( ) – fades the element to full opacity.<\/p>\n$('#fadeMe').fadeIn('');<\/pre>\n$('#fadeMe').fadeOut('slow');<\/pre>\n
\n– argument \u2018slow\u2019 , which is equivalent to 600ms.
\n– argument \u2018fast\u2019 , which is equivalent to 200ms.
\n– no argument which is equal to 400ms. you can also specify a custom time length.<\/p>\n
\nCapturing and Programming for Mouse Events\u00a0<\/strong><\/h3>\n
$('#myDiv').click(function(e){ } );<\/pre>\n
\njQuery’s hover event combines these two events in one jQuery method.<\/p>\n$('#myDiv').hover(function(e){ }, function(e){ } );<\/pre>\n
\nBasic DOM Traversal with jQuery<\/strong><\/h3>\n
$('#myDiv').parent('div').text();\r\n\r\n$('#myDiv').children('div').text();\r\n<\/pre>\n
\nCreating a Drop-down Menu with jQuery<\/h3>\n
<!-- in the head tag -->\r\n <meta charset=\"utf-8\">\r\n <!-- host jquery from google or locally. I host it from google -->\r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script><\/pre>\n
<!-- in the body tag -->\r\n<!-- drop down menu -->\r\n<div id=\"menuDemo\"> \r\n <ul class=\"nav\">\r\n <li id=\"homeMenu\"><a href=\"#menuHome\">JquerySample<\/a>\r\n <\/li>\r\n <li><a href=\"#\">Effects<\/a>\r\n <ul>\r\n <li><a href=\"#\">Sliding<\/a><\/li>\r\n <li><a href=\"#\">Fading<\/a><\/li>\r\n <li><a href=\"#\">Animation<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"#\">Events<\/a>\r\n <ul>\r\n <li><a href=\"#\">Click<\/a><\/li>\r\n <li><a href=\"#\">Hover<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"#\"><\/a>DOM<\/li>\r\n <li><a href=\"#\">Menu<\/a>\r\n <ul>\r\n <li><a href=\"#\">Drop down menu<\/a><\/li>\r\n <li><a href=\"#\">Accordion Menu<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <div class=\"clear\"><\/div>\r\n <\/div>\r\n<!-- drop down menu -->\r\n<\/pre>\n
\/*drop down menu*\/\r\nbody{\r\n background:#1e2e3b;\r\n color: #fff;\r\n margin:0;\r\n padding: 0;\r\n font-weight: normal;\r\n }\r\n .nav li{\r\n float: left;\r\n width: 150px;\r\n text-align: center;\r\n list-style-type: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\ndiv#menuDemo { \r\n\tposition: relative;\r\n\tcolor: #3aafa9;\t\r\n\tmargin-bottom: 50px;\r\n}\r\ndiv#menuDemo > ul > li {\r\n\tfloat: left;\r\n}\r\n\r\ndiv#menuDemo ul li {\r\n\tbackground: #fff;\r\n\tcolor: #3aafa9;\r\n\tmargin-right: 10px;\r\n\tpadding: 5px 0;\r\n}\r\n\r\ndiv#menuDemo ul li a {\r\n\ttext-decoration: none;\r\n\tcolor: #3aafa9;\t\r\n}\r\n\r\ndiv#menuDemo > ul > li > ul {\r\n\tdisplay: none;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tposition: absolute;\r\n}\r\n\r\ndiv#menuDemo > ul > li:hover > ul {\r\n\tdisplay: block;\r\n\twidth: 150px;\r\n\ttext-align: center;\r\n}\r\n\r\ndiv#menuDemo .nav{\r\n\tmargin:0;\r\n\tpadding: 0;\r\n}\r\n\/*drop down menu*\/\r\n\r\n<\/pre>\n\/\/drop down menu \r\n\r\n $('div#menuDemo > ul > li').hover(function() {\r\n \/\/effect when the user hovers over the menu\r\n $(this).children('ul').hide().slideDown();\r\n }, function() {\r\n \/\/effect when the user leaves the current menu - fade out\r\n $(this).children('ul').fadeOut();\r\n });\r\n<\/pre>\n
\nCreating an Accordion Menu with jQuery UI<\/h3>\n
\/\/To Use accordion menu \u00a0you need to include the jQuery UI js and css.\r\n<script src=\"https:\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js\"><\/script> \r\n<link rel=\"stylesheet\" href=\"css\/jquery-ui.css\">\r\n<\/pre>\n
$( \"#accordion\" ).accordion();<\/pre>\n
\nReference from www.jquerysample.com<\/a><\/span><\/p>\n