Scribd
Upload
10 views12 pages

Lecture 4

Uploaded by

moinuddeen.1999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views12 pages

Lecture 4

Uploaded by

moinuddeen.1999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l .

c o m )
JQuery Effects
LECTURE (4)

What are jQuery effects?

Jquery effects are used to hide, show, toggle, slide, fade and animate any element in DOM (Document Object
Model).

What is hide effect?

Hide effect is used to hide elements in DOM (Document Object Model).


Example:-
<!DOCTYPE html>
<html>
<head>
<title>Hide Effect</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('#hide').click(function(){
$('h1').hide();
});
});
</script>
</head>
<body>
<h1>This is heading 1</h1>
<button id="hide">Hide</button>
</body>
</html>

What is hide effect?

Show effect is used to hide elements in DOM (Document Object Model).


Example:-
<!DOCTYPE html>
<html>
<head>
<title>Show Effect</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">

1 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
$(document).ready(function(){
$('#show').click(function(){
$('h1').show();
});
});
</script>
<style>
h1{
display:none;
}

</style>
</head>
<body>
<h1>This is heading 1</h1>
<button id="show">Show</button>
</body>
</html>

What is toggle effect?

toggle effect is used to hide or show elements in DOM (Document Object Model).
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Hide/Show Effect</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('#toggle').click(function(){
$('h1').toggle(2000,function(){
alert("So this is called toggle effect");
});
});
});
</script>
</head>
<body>
<h1>This is heading 1</h1>

2 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
<button id="toggle">Show/Hide</button>
</body>
</html>

What is fadeIn effect?

fadeIn effect is used to apply fade in effect on elements in DOM (Document Object Model).
Example:-
<!DOCTYPE html>
<html>
<head>
<title>fadeIn Effect</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('#show').click(function(){
$('h1').fadeIn(2000);
});
});
</script>
<style>
h1{
display:none;
}

</style>
</head>
<body>
<h1>This is heading 1</h1>
<button id="show">fadeIn</button>
</body>
</html>

What is fadeOut effect?

fadeOut effect is used to apply fade Out effect on elements in DOM (Document Object Model).
Example:-
<!DOCTYPE html>
<html>
<head>
<title>fadeOut Effect</title>
3 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('#hide').click(function(){
$('h1').fadeOut();
});
});
</script>
</head>
<body>
<h1>This is heading 1</h1>
<button id="hide">fadeOut</button>
</body>
</html>

What is fadeToggle effect?

fadeToggle effect is used to apply fade out or fade in effects on elements in DOM (Document Object Model).
Example:-
<!DOCTYPE html>
<html>
<head>
<title>fadeIn/fadeOut Effect</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('#fadeToggle').click(function(){
$('h1').fadeToggle();
});
});
</script>
</head>
<body>
<h1>This is heading 1</h1>
<button id="fadeToggle">fadeIn/fadeOut</button><br>
</body>
</html>

What is stop effect?

Stop effect is used to stop jquery effect on elements in DOM (Document Object Model).
4 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Stop</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('#title').click(function(){
$('#more1,#more2').slideToggle(4000);
});
$('#stop').click(function(){
$('#more1,#more2').stop();
});
});
</script>
<style type="text/css">
#title,#stop{
margin:50px;
background-color:#7AB900;
border:3px groove #ff00cc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;
height:40px;
font-size:35px;
}
#more1,#more2{
margin:50px;
background-color:#ff9900;
border:3px groove #ffeecc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;
height:100px;
line-height:100px;
font-size:20px;
}
</style>
</head>
5 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
<body>
<div id="title">Click to start.</div>
<div id="stop">Click to stop.</div>
<div id="more1">This is a div tag with id "more1".</div>
<div id="more2">This is a div tag with id "more2".</div>
</body>
</html>

What is animate effect?

Animate effect is used to apply any jquery effect in animated way effect on elements in DOM (Document
Object Model).
Example:-
<!DOCTYPE html>
<html>
<head>
<title>animate Effect</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('#btn').click(function(){
$('.abc').animate({
height:"toggle"
},2000);
});
});
</script>
<style type="text/css">
.abc{
width:200px;
height:200px;
background-color:#7AB900;
border:3px groove #ff00cc;
box-shadow:10px 10px 50px #ccc;
color:white;
opacity:0.9;
duration:5000;
}
#btn{
width:200px;

6 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
height:50px;
background-color:#C11BFF;
border:3px groove #ffffff;
box-shadow:10px 10px 50px #ccc;
color:white;
}
</style>
</head>
<body>
<div class="abc">
This is a sample text.
</div><br><br>
<button id="btn">Click to start animation</button>
</body>
</html>

What is slideDown effect?

slideDown effect is used to show any element in slide way in DOM (Document Object Model).
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Slide Down</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('#title').click(function(){
$('#more1,#more2').slideDown();
});
});
</script>
<style type="text/css">
#title{
margin:50px;
background-color:#7AB900;
border:3px groove #ff00cc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;

7 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
height:40px;
font-size:35px;
}
#more1,#more2{
margin:50px;
background-color:#ff9900;
border:3px groove #ffeecc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;
height:100px;
line-height:100px;
font-size:20px;
display:none;
}
</style>
</head>
<body>
<div id="title">Click to show.</div>
<div id="more1">This is a div tag with id "more1".</div>
<div id="more2">This is a div tag with id "more2".</div>
</body>
</html>

What is slideUp effect?

slideUp effect is used to hide any element in slide way in DOM (Document Object Model).
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Slide Up</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$('#title').click(function(){
$('#more1,#more2').slideUp();
});
});
</script>

8 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
<style type="text/css">
#title{
margin:50px;
background-color:#7AB900;
border:3px groove #ff00cc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;
height:40px;
font-size:35px;
}
#more1,#more2{
margin:50px;
background-color:#ff9900;
border:3px groove #ffeecc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;
height:100px;
line-height:100px;
font-size:20px;
}
</style>
</head>
<body>
<div id="title">Click to Hide.</div>
<div id="more1">This is a div tag with id "more1".</div>
<div id="more2">This is a div tag with id "more2".</div>
</body>
</html>

What is slideToggle effect?

slideToggle effect is used to hide or show any element in slide way in DOM (Document Object Model).
Example:-
<!DOCTYPE html>
<html>
<head>
<title>slideToggle</title>
<script src="jquery-1.9.1.min.js"></script>

9 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
<script type="text/Javascript">
$(document).ready(function(){
$('#title').click(function(){
$('#more1,#more2').slideToggle();
});
});
</script>
<style type="text/css">
#title{
margin:50px;
background-color:#7AB900;
border:3px groove #ff00cc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;
height:40px;
font-size:35px;
}
#more1,#more2{
margin:50px;
background-color:#ff9900;
border:3px groove #ffeecc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;
height:100px;
line-height:100px;
font-size:20px;
}
</style>
</head>
<body>
<div id="title">Click to show/Hide.</div>
<div id="more1">This is a div tag with id "more1".</div>
<div id="more2">This is a div tag with id "more2".</div>
</body>
</html>

What is callback in jquery?

10 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
A callback function is executed after the current effect is 100% finished.

Example:-
<!DOCTYPE html>
<html>
<head>
<title>CallBack</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("#title").click(function(){
$("#more").hide("slow",function(){
alert("The div tag is now hidden");
});
});
});
</script>
<style type="text/css">
#title{
margin:50px;
background-color:#7AB900;
border:3px groove #ff00cc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;
height:40px;
font-size:35px;
}
#more{
margin:50px;
background-color:#ff9900;
border:3px groove #ffeecc;
box-shadow:10px 10px 50px #ccc;
color:white;
text-align:center;
height:100px;
line-height:100px;
font-size:20px;
}
</style>

11 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial
Lecture 4<Jquery Effects> Prepared by Mr. Noman Tanseer (N o m a n s h 3 9 @ g m a i l . c o m )
</head>
<body>
<div id="title">Click to hide</div>
<div id="more">This is a div tag with id "more".</div>
</body>
</html>

What is chaining in jquery?

Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.

Example:-
<!DOCTYPE html>
<html>
<head>
<title>Chaning</title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>

<p id="p1">jQuery is fun!!</p>


<button>Click me</button>

</body>
</html>

12 | P a g e If you have any query joint the facebook group also for help and online lectures and tutorials.
https://www.facebook.com/groups/pofwccteachersofficial

You might also like