Animation & Effects Using JQuery

What is jQuery? jQuery is a lightweight, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. ( JavaScript - sometimes abbreviated as JS, is a prototype-based scripting language. JavaScript is used to add functionality to HTML tags like key press and mouse move)prototype-basedscripting language jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the other complicated things from JavaScript.

3 What is jQuery Put simply jQuery is a way to capture events from the browser, and then do something when this event occurs. eg when a user clicks we might want the page to animate or we may want to insert a new class to modify a pages CSS style rules.

4 Using JQuery To use jQuery the first thing you need to do is download the library and include a reference to it in your document. There are several ways to do this. You can: Download the jQuery library from jQuery.comjQuery.com Include jQuery from a CDN (Content Delivery Network) like Google (One advantage of this is that many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.)

jQuery Syntax The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() - $ is just an abbreviation for jQuery - (selector) is a “query” to find an HTML id or class - action() is a jQuery method you want to use on that element. Examples: $(this).hide() - hides the current element. $("p").hide() - hides all elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".

jQuery Selectors jQuery selectors are one of the most important parts of jQuery. Selectors allow you to select and manipulate HTML elements. The three main jQuery selectors you will encounter are element selectors, #id selectors and.class selectors. An element selector selects elements based on the element name. An #id selector uses the id attribute of an HTML tag to find the specific element. A class selector finds elements with a specific class. **All selectors in jQuery start with the dollar sign and parentheses: $().

7 jQuery Events What are Events? All the different visitor's actions that a web page can respond to are called events. An event represents the precise moment when something happens. Examples: moving a mouse over an element selecting a radio button clicking on an element In jQuery, most events have an equivalent jQuery method. e.g. - To assign a click event to all paragraphs on a page, you can do this: $(“p").click(); The next step is to define what should happen when the event ‘fires’. You do this by passing a function to the event: $("p").click(function(){ // action goes here!! });

8 Commonly Used jQuery Events click() The function is executed when the user clicks on an HTML element. dblclick() The function is executed when the user double-clicks on an HTML element. mouseenter() The function is executed when the mouse pointer enters an HTML element. mouseleave() The function is executed when the mouse pointer leaves an HTML element. mousedown() / mouseup() The function is executed, when the left mouse button is pressed down / released, while the mouse is over an HTML element.

9 jQuery Effects Now that we understand the basics of jQuery Selectors and events, we can start to add interactivity to our sites using jQuery effects. There are two main sorts of effects you will probably find yourself using initially: Showing / Hiding Content the show(), hide(), slideUp(), slideDown(), fadeIn() and fadeOut() methods are all pretty self explanatory. toggle(), slideToggle() and fadeToggle() toggle between visible / invisible states, depending on the current visibility of the element Manipulating Css Styles css() — changes the css of an element addClass() and removeClass() — adds and removes CSS classes

EXERCISE 1 Exercise 1 intro to jQuery.

JQuery Plugins To make life easier there are many JQuery Plugins around. Plugins are extentions to JQuery framework that let you quickly and easily create specific functionality Some popular plugins include, galleries, video players, calendars, image sliders & Page Scrollers jquery-plugins-of.htmlhttp:// jquery-plugins-of.html

EXERCISE 2: Page Scroller Plugin STEP1: Download the plugin STEP 2: Add the JS file to your document STEP3: Initiate the Plugin STEP 4: Set ‘nav’ element STEP 5: Add sections (class=“section) to your page

Alternative Page Scrollers Vertical Scroller – vertical-or-horizontal-page-scrolling-with-jquery/ vertical-or-horizontal-page-scrolling-with-jquery/ Parallax Scrollers – scrolling-effect-plugins.htmhttp://smashinghub.com/7-jquery-parallax-and- scrolling-effect-plugins.htm – parallax/docs#.UEdsS0SIv98http://dev.jonraasch.com/scrolling- parallax/docs#.UEdsS0SIv98 – pluginhttp://jonraasch.com/blog/scrolling-parallax-jquery- plugin