javascriptANDJquery/effectsinjquery.html at master · sadique43/javascriptANDJquery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<style>
#div1{
border: 20px solid yellow;

margin-right:80%;
height:20px;
width:20px;
margin-top:5px;
position:absolute;

}
.newdiv
{
border-radius:50%;
background-color:aqua;

}

</style>
</head>
<body>
<h2 id="head1">Hello shayariYouth1</h2>
<h2 id="head2">Hello shayariYouth2</h2>
<button id="btn1">Click Me1</button>
<button id="btn2">clik me 2</button>
<button id="btn3">clik me 3</button>
<button id="btn4">Fade Out</button>
<button id="btn5">Slide Up</button>
<button id="btn6">Slide Down</button>
<button id="btn7">Slide Toggle</button>
<button id="btn8">Animate</button>
<button id="btn9">Append</button>
<button id="btn10">Prepend</button>
<button id="btn11">Remove</button>
<button id="btn12">Empty</button>
<button id="btn13">CSS</button>
<button id="btn14">Remove CSS</button>
<button id="btn15">Toggle CSS</button>
<div id="div1" >hi</div>

</body>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
function fn1()
{
alert("task completed");
}
$("#btn1").click(function(){
$("#head1").hide();
$("#head2").html("bye<b> bye</b>");
});
$("#btn2").click(function(){
$("#head1").show();
});
$("#btn3").click(function(){
$("#head1,#head2").toggle();
});
$("#btn4").click(function(){
$("#head1,#head2").fadeOut(3000,fn1);
});
$("#btn5").click(function(){
$("#head1,#head2").slideUp();
});
$("#btn6").click(function(){
$("#head1,#head2").slideDown();
});
$("#btn7").click(function(){
$("#head1,#head2").slideToggle();
});
$("#btn8").click(function(){
$("#div1").animate({left:'150px',opacity:'0.5',width:'100px',height:'100px'},1000)
});
$("#btn8").dblclick(function(){
$("#div1").animate({left:'0px',width:'10%',height:'10%',opacity:'1'},1000)
});
$("#btn9").click(function(){
$("#head2").append("<h2>this is 2nd heading</h2>");
});
$("#btn10").click(function(){
$("#head2").prepend("<h2>this is 2nd heading</h2>");
});
$("#btn11").click(function(){
$("h2").remove("#head2");
});
$("#btn12").click(function(){
$("h2").empty();
});
$("#btn13").click(function(){
$("#div1").addClass("newdiv");
});
$("#btn14").click(function(){
$("#div1").removeClass("newdiv");
});
$("#btn15").click(function(){
$("#div1").toggleClass("newdiv");
});
});

</script>
</html>