Overview Of jQuery UI Effects

In this article, we will learn jQueryUI. This is the third part of this article series of jQueryUI. In this part, we will learn about jQuery UI Effects. UI stands for User interface and it's used for creating user-interactive applications using jQuery and HTML.

Prerequisites

Basic Knowledge of,

HTML
JavaScript
Css

In this part, we are going to learn about jQuery Effects

Hide()
Show()
Add class
Remove class

Hide/show

The jQuery hide and show method are used in hiding and showing an element. This method is used to create visual effects.

Open Visual Studio and create a new project -- rename it as jQuery and download the required jQuery reference file from the jQuery Website or NuGet package manager and add the reference of the jQuery file into the page's head section,

<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<link href="Scripts/jquery-ui.css" rel="stylesheet" />

Add a div and two buttons in the body section of our page,

<div id="Mdiv" style="height:110px;width:190px;border:2px solid red">jQuery Hide and Show Effect</div>
<button id="btnhide">Hide</button>
<button id="btnshow">Show</button>

Now, add the following code in script tag in head section,

<script>
$(document).ready(function() {
$("#btnhide").click(function() {
$("#Mdiv").hide();
});
$("#btnshow").click(function() {
$("#Mdiv").show();
});
});
</script>

Complete Code

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<link href="Scripts/jquery-ui.css" rel="stylesheet" />
<meta charset="utf-8" />
<script>
$(document).ready(function() {
$("#btnhide").click(function() {
$("#Mdiv").hide();
});
$("#btnshow").click(function() {
$("#Mdiv").show();
});
});
</script>
</head>
<body>
<div id="Mdiv" style="height:110px;width:190px;border:2px solid red">jQuery Hide and Show Effect</div>
<button id="btnhide">Hide</button>
<button id="btnshow">Show</button>
</body>
</html>

Now run the project and check the Result,

Click on the Hide and show button and check the Effects.

Addclass/Removeclass

By using these method we can add or remove css class from selected elements.

Add a div and two buttons in the body section of our page

<div id="Mdiv">jQuery Hide and Show Effect</div>
<button id="btnadd">Add Css</button>
<button id="btnremove">Remove Css </button>

Now add the following code in style tag in head section,

<style>
.maincss {
color: red;
background-color: yellow;
font-size: 24px;
}
</style>

Now add the following code in script tag in head section.

<script>
$(document).ready(function() {
$("#btnadd").click(function() {
$("#Mdiv").addClass("maincss");
});
$("#btnremove").click(function() {
$("#Mdiv").removeClass("maincss")
});
});
</script>

Complete code.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<link href="Scripts/jquery-ui.css" rel="stylesheet" />
<meta charset="utf-8" />
<style>
.maincss {
color: red;
background-color: yellow;
font-size: 24px;
}
</style>
<script>
$(document).ready(function() {
$("#btnadd").click(function() {
$("#Mdiv").addClass("maincss");
});
$("#btnremove").click(function() {
$("#Mdiv").removeClass("maincss")
});
});
</script>
</head>
<body>
<div id="Mdiv">jQuery Hide and Show Effect</div>
<button id="btnadd">Add Css</button>
<button id="btnremove">Remove Css </button>
</body>
</html>

Run the project and check the Result,

Click on the Add CSS class Button,

Click on remove CSS button and check.

Summary

In this article we learned about jQuery Hide, show, addclass and removeclass method. In the next article, we will learn about the fade effect in jQuery.