Scribd
Upload
15 views10 pages

HTML

The document provides an overview of HTML as the standard markup language for creating web pages, detailing its structure and elements. It also introduces jQuery, explaining how to add it to web pages and describing various methods for manipulating HTML elements, including hide, show, fade, and slide effects. Each jQuery method is accompanied by syntax and examples for practical implementation.

Uploaded by

rnmvusrzvtapwjbrry
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
15 views10 pages

HTML

The document provides an overview of HTML as the standard markup language for creating web pages, detailing its structure and elements. It also introduces jQuery, explaining how to add it to web pages and describing various methods for manipulating HTML elements, including hide, show, fade, and slide effects. Each jQuery method is accompanied by syntax and examples for practical implementation.

Uploaded by

rnmvusrzvtapwjbrry
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/ 10

What is ?

• HTML stands for Hyper Text Markup Language


• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
How to Use
?
Adding jQuery to Your Web Pages
There are several ways to start using jQuery on your web site. You can:

• Download the jQuery library from jQuery.com

• Include jQuery from a CDN, like Google

Downloading jQuery
There are two versions of jQuery available for downloading:

• Production version - this is for your live website because it has been
minified and compressed

• Development version - this is for testing and development


(uncompressed and readable code)
Effect (Hide –
Show)
jQuery hide() and show()

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

Example:

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});
Effect (FadeIn)

jQuery fadeIn() Method


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

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:
Effect (FadeOut)

jQuery fadeOut() Method


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

Syntax:

$(selector).fadeOut(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 fadeOut() method with different parameters:
Effect
(FadeToggle)
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);
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 fadeToggle() method with different parameters:
Effect (FadeTo)

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:
Effects
- SlideDown
jQuery slideDown() Method
The jQuery slideDown() method is used to slide down an element.

Syntax:

$(selector).slideDown(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 sliding completes.

The following example demonstrates the slideDown() method:


Effects - SlideUp

jQuery slideUp() Method


jQuery slideUp() Method

Syntax:

$(selector).slideUp(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 sliding completes.

The following example demonstrates the slideUp() method:


Effects
- SlideToggle
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.

$(selector).slideToggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", milliseconds.

The optional callback parameter is a function to be executed after the sliding completes.

The following example demonstrates the slideToggle() method:

You might also like