Scribd
Upload
12 views20 pages

Lecture 4 FS

Uploaded by

๖OxY乛 RÆZOR
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views20 pages

Lecture 4 FS

Uploaded by

๖OxY乛 RÆZOR
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Full Stack Development

(IT432)

Anju Mishra
Department of Information Technology

1
Module II- Introduction to jQuery

Topic Name- Introduction to jQuery and its implementation

Subtopic Name: Definitions, Value & Scope of jQuery Effects, Animation

Learning Objectives: To understand the concept of jQuery Effects, Animation

Learning Outcomes: Students will be able to recognizer various jQuery Effects, Animation

2
Outline
 jQuery Effects
 Hide/Show
 Fade
 Slide
 Animate
 Chaining
Q & A

3
jQuery Effects
 jQuery hide(), show() and toggle() 1. $("#hide").click(function(){
• With jQuery, you can hide and show HTML elements 2. $("p").hide();
with the hide() and show() methods: 3. });

• $(selector).hide(speed,callback); 4. $("#show").click(function(){
• $(selector).show(speed,callback); 5. $("p").show();
• $(selector).toggle(speed,callback); 6. });

• The optional speed parameter specifies the speed of 7. $("#toggle").click(function(){


the hiding/showing, and values are: "slow", "fast", or 8. $("p").toggle();
milliseconds.
9. });
• You can also toggle between hiding and showing an
element with the toggle() method.
4
Effects - Fading
 jQuery fadeIn() and fadeOut() fadeToggle() and fadeTo()
• With jQuery you can fade an element in and out of visibility. The optional speed parameter specifies the
duration of the effect. It can take the following values: "slow", "fast", or millisecond
• Opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1)
• jQuery has the following fade methods:

Methosd Description Syntax

fadeIn() used to fade in a hidden element $(selector).fadeIn(speed,callback);

fadeOut() used to fade out a visible element $(selector).fadeOut(speed,callback);

fadeToggle() toggles between the fadeIn() and fadeOut() methods $(selector).fadeToggle(speed,callback);

fadeTo() allows fading to a given opacity (value between 0 $(selector).fadeTo(speed,opacity,callback);


and 1)

5
Example
$("button").click(function(){ $("button").click(function(){
$("#div1").fadeOut(); $("#div1").fadeIn();
$("#div2").fadeOut("slow"); $("#div2").fadeIn("slow");
$("#div3").fadeOut(3000); $("#div3").fadeIn(3000);
}); });

$("button").click(function(){ $("button").click(function(){
$("#div1").fadeToggle(); $("#div1").fadeTo("slow", 0.15);
$("#div2").fadeToggle("slow"); $("#div2").fadeTo("slow", 0.4);
$("#div3").fadeToggle(3000); $("#div3").fadeTo("slow", 0.7);
}); });
6
Effects - Sliding
 jQuery slideDown(), slideUp(), slideToggle()
• The optional speed parameter specifies the duration of the effect. It can take the
following values: "slow", "fast", or millisecond
• The optional callback parameter is a function to be executed after the sliding completes
• jQuery has the following sliding methods:
Methosd Description Syntax

slideDown() used to slide down an element $(selector).slideDown(speed,callback);

slideUp() used to slide up an element $(selector).slideUp(speed,callback);

slideToggle() toggles between $(selector).slideToggle(speed,callback);


the slideDown() and slideUp() methods

7
Example

$("#flip").click(function(){ $("#flip").click(function(){
$("#panel").slideUp(); $("#panel").slideDown();
}); });

$("#flip").click(function(){
$("#panel").slideToggle();
});
8
Effects - Animation
 jQuery animate()

• This method is used to create custom animations. <script>


$(document).ready(function(){
$("button").click(function(){
Syntax:
$("div").animate({left:
$(selector).animate({params}, speed, callback); '250px'});
});
• The required params parameter defines the CSS });
properties to be animated. </script>
• The following example demonstrates a simple </head>
use of the animate() method; it moves a <div> <body>
element to the right, until it has reached a left
property of 250px: 9
10
Animate - Uses Queue Functionality
 By default, jQuery comes with queue
functionality for animations. $("button").click(function(){
var div = $("div");
 This means that if you write multiple div.animate({height: '300px’,
animate() calls after each other, jQuery opacity: '0.4'}, "slow");
creates an "internal" queue with these div.animate({width: '300px',
method calls. Then it runs the animate opacity: '0.8'}, "slow");
calls ONE by ONE. div.animate({height: '100px',
opacity: '0.4'}, "slow");
 So, if you want to perform different div.animate({width: '100px',
animations after each other, we take
advantage of the queue functionality: opacity: '0.8'}, "slow");
});

11
Animate – stop() method
 The jQuery stop() method is used to stop an animation
or effect before it is finished. $("#stop").click(function(){
$("#panel").stop();
 The stop() method works for all jQuery effect functions, });
including sliding, fading and custom animations.

 Syntax: $(selector).stop(stopAll,goToEnd);
 The optional stopAll parameter specifies whether also
the animation queue should be cleared or not. Default is
false, which means that only the active animation will be
stopped, allowing any queued animations to be
performed afterwards.

 The optional goToEnd parameter specifies whether or


not to complete the current animation immediately. 12
Default is false.
Animate – jQuery - Chaining
 Until now we have been writing jQuery statements $
one at a time (one after the other). ("#p1").css("color", "red").slide
 However, there is a technique called chaining, that Up(2000).slideDown(2000);
allows us to run multiple jQuery commands, one after $("#p1").css("color", "red")
the other, on the same element(s). .slideUp(2000)
 Tip: This way, browsers do not have to find the same .slideDown(2000);
element(s) more than once.

 To chain an action, you simply append the action to


the previous action.

 The following example chains together the css(),


slideUp(), and slideDown() methods. The "p1"
element first changes to red, then it slides up, and 13
then it slides down:.
Q&A

• Which are the possible values for optional speed


parameter can take the following values?

• Is it possible to manipulate ALL CSS properties with


the animate() method?

• How to animate using Relative Values?

• Explain jQuery Chaining Method?

14
Learning Outcome
 At the end of this session, you will be able to
 Understand the basics of jQuery Effects Techniques
 Understand the Animation methods.
 Get familiar with chaining technique.

15
16
17
18
19
20

You might also like