<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#btnShow').click(function () {
$('div').show(500);
})
$('#btnHide').click(function () {
$('div').hide(500);
})
$('#btnSlideDown').click(function () {
$('div').slideDown(500);
})
$('#btnSlideUp').click(function () {
$('div').slideUp(500);
})
$('#btnSlideToggle').click(function () {
$('div').slideToggle(1000);
})
$('#btnFadeIn').click(function () {
$('div').fadeIn(500);
})
$('#btnFadeOut').click(function () {
$('div').fadeOut(500);
})
$('#btnFadeToggle').click(function () {
$('div').fadeToggle(1000);
})
})
</script>
</head>
<body>
<input type="button" name="name" value="Show" id="btnShow" />
<input type="button" name="name" value="Hide" id="btnHide"/>
<input type="button" name="name" value="SlideDown" id="btnSlideDown"/>
<input type="button" name="name" value="SlideUp" id="btnSlideUp"/>
<input type="button" name="name" value="SlideToggle" id="btnSlideToggle"/>
<input type="button" name="name" value="FadeIn" id="btnFadeIn"/>
<input type="button" name="name" value="FadeOut" id="btnFadeOut"/>
<input type="button" name="name" value="FadeToggle" id="btnFadeToggle"/>
<div style="300px;height:200px;background-color:blue"></div>
</body>
</html>