<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>internal</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("p").hide(function(){
alert("yes");
});
});
$("#b2").click(function(){
$("p").show();
});
$("#b3").click(function(){
$("p").toggle();
});
$("#f1").click(function(){
$("p").fadeIn();
});
$("#f2").click(function(){
$("p").fadeOut("3000");
});
$("#f3").click(function(){
$("p").fadeToggle();
});
$("#s1").click(function(){
$("p").slideUp(3000);
});
$("#s2").click(function(){
$("p").slideDown();
});
$("#s3").click(function(){
$("p").slideToggle();
});
$("#a1").click(function(){
$("div,#p1").animate({fontSize:"10px",width:"100px", height:"100px"},8000);
});
$("#stop1").click(function(){
$("div,#p1").stop();
});
$("#chaining").click(function(){
$("div,#p1").slideDown().slideUp();
});
});
</script>
<style>
div{
background-color: yellow;
margin: 20px;
width:300px;
height:300px;
}
</style>
</head>
<body>
<div>
<p id="p1" style="font-size: 30px;">vidhyaafhahadht xdr5 rhwr tehv yvv5ehcdyct rcthschcg hsdffdhxcdrtyrtrtrhbh gbbbbbbbbbv bvbvbvvgtrrr</p>
</div>
<button id="b1">hide</button>
<button id="b2">show</button>
<button id="b3">toggle</button>
<button id="f1">fadein</button>
<button id="f2">fadeout</button>
<button id="f3">fadetoggle</button>
<button id="s1">slideup</button>
<button id="s2">slidedown</button>
<button id="s3">slidetoggle</button>
<button id="a1">animate</button>
<button id="stop1">stop</button>
<button id="chaining">chaining</button>
</body>
</html> |
