Unit3 - Effects and Events

Effects and Events
Unit 3
jQuery Effect Methods
The following table lists all the jQuery methods for creating animation effects.
Method Description
show() Shows the selected elements
hide() Hides the selected elements
slideDown() Slides-down (shows) the selected elements
slideToggle() Toggles between the slideUp() and slideDown() methods
slideUp() Slides-up (hides) the selected elements
fadeIn() Fades in the selected elements
fadeOut() Fades out the selected elements
fadeTo() Fades in/out the selected elements to a given opacity
fadeToggle() Toggles between the fadeIn() and fadeOut() methods
animate() Runs a custom animation on the selected elements

jQuery Effect: show() And hide() Methods
The show() method shows the hidden, selected elements.
The hide() method hides the selected elements.
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
This is a paragraph.
<button class="btn1">Hide</button> show Hide

<button class="btn2">Show</button>
</body>
</html>
jQuery Sliding Methods
With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:
slideDown()
slideUp()
slideToggle()
jQuery slideDown() Method
The jQuery slideDown() method is used to slide down an element.
Example
$("#flip").click(function(){
$("#panel").slideDown();
});
Try it Yourself »
jQuery slideUp() Method
The jQuery slideUp() method is used to slide up an element.
Example
$("#panel").slideUp();
});
Try it Yourself »
jQuery slideToggle() Method
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
If the elements have been slid down, slideToggle() will slide them up.
If the elements have been slid up, slideToggle() will slide them down.
Example
$("#panel").slideToggle();
});
Try it Yourself »
jQuery Fading Methods
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() Method
The jQuery fadeIn() method is used to fade in a hidden element.
Syntax:
$(selector).fadeIn(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or
milliseconds.
The optional callback parameter is a function to be executed after the fading completes.
The following example demonstrates the fadeIn() method with different parameters:
Example
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Try it Yourself »
jQuery fadeOut() Method
The jQuery fadeOut() method is used to fade out a visible element.
Syntax:
$(selector).fadeOut(speed,callback);
milliseconds.
The following example demonstrates the fadeOut() method with different parameters:
Example
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Try it Yourself »
jQuery fadeToggle() Method
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
If the elements are faded out, fadeToggle() will fade them in.
If the elements are faded in, fadeToggle() will fade them out.
Syntax:
$(selector).fadeToggle(speed,callback);
milliseconds.
The following example demonstrates the fadeToggle() method with different parameters:
Example
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
Try it Yourself »
jQuery fadeTo() Method
The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or
milliseconds.
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and
1).
The optional callback parameter is a function to be executed after the function completes.
The following example demonstrates the fadeTo() method with different parameters:
Example
$("#div1").fadeTo("slow", 0.15);
});
Try it Yourself »
jQuery Animations - The animate() Method
The jQuery animate() method is used to create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
Example
$("div").animate({left: '250px'});
});
Try it Yourself »
Example
"Animate" an element, by changing its height:
$("#box").animate({height: "300px"});
});
Try it Yourself »
jQuery Events
Events are often triggered by the user's interaction with the web page, such as when a link or button is clicked,
text is entered into an input box or text area, selection is made in a select box, key is pressed on the keyboard,
the mouse pointer is moved etc.
jQuery enhances the basic event-handling mechanisms by offering the events methods for most native
browser events, some of these methods
are ready(), click(), keypress(), focus(), blur(), change(), etc.
For example, to execute some JavaScript code when the DOM is ready, you can use the
jQuery ready() method, like this:
Example
Try this code »
<script> $(document).ready(function()
{ // Code to be executed
alert("Hello World!"); });
</script>
Mouse Events
A mouse event is fired when the user click some element, move the mouse pointer etc. Here're some
commonly used jQuery methods to handle the mouse events.
The click() Method
The jQuery click() method attach an event handler function to the selected elements for "click" event.
The attached function is executed when the user clicks on that element.
The following example will hide the <p> elements on a page when they are clicked.
Example
Try this code »
<script>
$(document).ready(function()
{ $("p").click(function()
{ $(this).slideUp();
});
});
</script>
The dblclick() Method
The jQuery dblclick() method attach an event handler function to the selected elements for "dblclick" event.
The attached function is executed when the user double-clicks on that element.
The following example will hide the <p> elements when they are double-clicked.
Example
Try this code »
<script>
{ $("p").dblclick(function()
{ $(this).slideUp();
});
});
</script>
The hover() Method
The jQuery hover() method attach one or two event handler functions to the selected elements that is
executed when the mouse pointer enters and leaves the elements.
The first function is executed when the user place the mouse pointer over an element, whereas the second
function is executed when the user removes the mouse pointer from that element.
The following example will highlight <p> elements when you place the cursor on it, the highlighting will be
removed when you remove the cursor.
Example
Try this code »
<script>
{ $("p").hover(function()
{ $(this).addClass("highlight"); },
function()
{ $(this).removeClass("highlight");
});
});
</script>
The mouseenter() Method
The jQuery mouseenter() method attach an event handler function to the selected elements that is
executed when the mouse enters an element.
The following example will add the class highlight to the <p> element when you place the cursor on it.
Example
Try this code »
<script> $(document).ready(function()
{ $("p").mouseenter(function()
{ $(this).addClass("highlight");
});
});
</script>
The mouseleave() Method
The jQuery mouseleave() method attach an event handler function to the selected elements that is
executed when the mouse leaves an element.
The following example will remove the class highlight from the <p> element when you remove the cursor
from it.
Example
Try this code »
<script>
{ $("p").mouseleave(function()
{ $(this).removeClass("highlight");
});
});
</script>
Keyboard Events
A keyboard event is fired when the user press or release a key on the keyboard. Here're some commonly
used jQuery methods to handle the keyboard events.
The keypress() Method
The jQuery keypress() method attach an event handler function to the selected elements (typically form
controls) that is executed when the browser receives keyboard input from the user.
The following example will display a message when the keypress event is fired and how many times it is
fired when you press the key on the keyboard.
Example
Try this code »
<script>
{ var i = 0; $('input[type="text"]').keypress(function()
{ $("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
The keydown() Method
The jQuery keydown() method attach an event handler function to the selected elements (typically form
controls) that is executed when the user first presses a key on the keyboard.
The following example will display a message when the key down event is fired and how many times it is
fired when you press the key on the keyboard.
Example
Try this code »
<script>
{ var i = 0;
$('input[type="text"]').keydown(function()
{ $("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
The keyup() Method
The jQuery keyup() method attach an event handler function to the selected elements (typically form
controls) that is executed when the user releases a key on the keyboard.
The following example will display a message when the keyup event is fired and how many times it is fired
when you press and release a key on the keyboard.
Example
Try this code »
<script>
{ var i = 0;
$('input[type="text"]').keyup(function()
{ $("span").text(i += 1); $("p").show().fadeOut();
});
});
</script>
Form Events
A form event is fired when a form control receive or loses focus or when the user modify a form control
value such as by typing text in a text input, select any option in a select box etc. Here're some commonly
used jQuery methods to handle the form events.
The change() Method
The jQuery change() method attach an event handler function to

the <input>, <textarea> and <select> elements that is executed when its value changes.
The following example will display an alert message when you select any option in dropdown select box.
Example
Try this code »
<script>
{ $("select").change(function()
{ var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>
The focus() Method
The jQuery focus() method attach an event handler function to the selected elements (typically form
controls and links) that is executed when it gains focus.
The following example will display a message when the text input receive focus.
Example
Try this code »
<script>
{ $("input").focus(function()
{ $(this).next("span").show().fadeOut("slow");
});
});
</script>
The blur() Method
The jQuery blur() method attach an event handler function to the form elements such
as <input>, <textarea>, <select>
that is executed when it loses focus.
The following example will display a message when the text input loses focus.
Example
Try this code »
<script>
{ $("input").blur(function()
{ $(this).next("span").show().fadeOut("slow");
});
});
</script>
Document/Window Events
Events are also triggered in a situation when the page DOM (Document Object Model) is ready or
when the user resize or scrolls the browser window, etc. Here're some commonly used jQuery methods to
handle such kind of events.
The ready() Method

The jQuery ready() method specify a function to execute when the DOM is fully loaded.
The following example will replace the paragraphs text as soon as the DOM hierarchy has been fully
constructed and ready to be manipulated.
Example
Try this code »
<script>
{ $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
The resize() Method
The jQuery resize() method attach an event handler function to the window element that is executed
when the size of the browser window changes.
The following example will display the current width and height of the browser window when you try to
resize it by dragging its corners.
Example
Try this code »
<script>
{ $(window).resize(function()
{ $(window).bind("resize", function()
{ $("p").text("Window width: " + $(window).width() + ", " + "Window height: " +
$(window).height());
});
});
});
</script>
The scroll() Method
The jQuery scroll() method attach an event handler function to the window or scrollable
iframes and elements that is executed whenever the element's scroll position changes.
The following example will display a message when you scroll the browser window.
Example
Try this code »
<script>
{ $(window).scroll(function()
{ $("p").show().fadeOut("slow");
});
});
</script>
Thank You

Unit3 - Effects and Events

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit3 - Effects and Events

Uploaded by

Copyright:

Available Formats

Effects and Events

show() Shows the selected elements

hide() Hides the selected elements

slideDown() Slides-down (shows) the selected elements

slideToggle() Toggles between the slideUp() and slideDown() methods

slideUp() Slides-up (hides) the selected elements

fadeIn() Fades in the selected elements

fadeOut() Fades out the selected elements

fadeTo() Fades in/out the selected elements to a given opacity

fadeToggle() Toggles between the fadeIn() and fadeOut() methods

animate() Runs a custom animation on the selected elements

<button class="btn1">Hide</button> show Hide

With jQuery you can create a sliding effect on elements.

jQuery has the following slide methods:

jQuery slideDown() Method

The jQuery slideDown() method is used to slide down an element.

The jQuery slideUp() method is used to slide up an element.

jQuery slideToggle() Method

With jQuery you can fade an element in and out of visibility.

jQuery has the following fade methods:

The jQuery fadeIn() method is used to fade in a hidden element.

The jQuery fadeOut() method is used to fade out a visible element.

The jQuery animate() method is used to create custom animations.

The click() Method

The keypress() Method

The change() Method

The jQuery change() method attach an event handler function to

The ready() Method

You might also like