jQuery UI’s show() Effect to Create Animated Transitions

In the process of web development, animations and effects that enhance user experience are essential elements. Especially, animations used in page transitions or content display not only provide visual impact to viewers but also bring consistency to the overall design of the page.

In this article, I will explain in detail how to easily implement animation effects using the jQuery UI show() effect. Even those who are introducing web animations for the first time will find this content easy to understand, so please read until the end.

What is jQuery UI’s show() Effect?

The show() effect is a standard animation provided by jQuery UI that allows you to display hidden elements using animations. The basic show() method simply switches the visibility of a hidden element to visible, but by using jQuery UI’s show() effect, you can display elements with various animations.

For example, you can combine animations like “slide,” “fade,” and “drop” instead of just displaying them. By adding such animations, you can provide a more attractive interface for users.

Loading JavaScript Files to Create Animations Using jQuery UI’s show() Effect

First, to use jQuery and jQuery UI, load the necessary JavaScript files `jquery.min.js` and `jquery-ui.min.js`. Add the following code to your HTML file.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

These files can be loaded directly from Google’s hosted CDN, making them easy to use. Since there are many versions of jQuery, it is important to use the version that suits your project. Also, depending on the version of jQuery UI, there may be compatibility issues with some effects or methods, so be cautious.

CSS Description for Animations Using jQuery UI’s show() Effect

Next, style the elements that will be animated with CSS. In this example, we will hide the `h1`, `h2` tags, and `idDiv`, and implement an animation to display them in sequence.

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:22px;
	font-weight:bold;
	line-height:1.2em;
	text-align:center;
	padding:15px 0;
	display:none;
}
h2{
	font-size:20px;
	font-weight:bold;
	line-height:1.2em;
	text-align:center;
	padding:15px 0;
	display:none;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
#idDiv{
	display:none;
}
-->
</style>

In this style setting, a content area `idWrap` is created in the center of the page, which includes `h1`, `h2` tags, and a `div` for placing images. These elements are initially hidden (`display: none;`), and they will be displayed using JavaScript described later.

HTML Description for Animations Using jQuery UI’s show() Effect

Next, write the HTML code. In this code, the `h1`, `h2` tags, and `idDiv` are displayed in sequence using the show() effect.

<div id="idWrap">
        <h1 id="idH1">This h1 tag is displayed using the fadeIn effect, not with jQuery UI's show effect.</h1>
        <div id="idDiv"><img src="logo.jpg" alt="DAD UNION"></div>
        <h2 id="idH2">The image above and this text are displayed using jQuery UI's show effect.<br>This is an animated effect.</h2>
</div>

This HTML structure is very simple, making it easy for beginners to understand. The `idWrap` container contains the `h1` tag, a `div` with an image, and an `h2` tag arranged in sequence. How these elements are displayed is controlled by the JavaScript described next.

JavaScript Description for Animations Using jQuery UI’s show() Effect

Finally, the implementation of the JavaScript code to realize the animation. Add the following script to your HTML file.

Hidden elements with “id=”idH1″, id=”idH2″, id=”idDiv”” are displayed in order using the show() effect with delay().

<script type="text/javascript">
<!--
$('#idH1').fadeIn(1500);
$('#idDiv').delay(1700).show('drop',{direction:"left"},500);
$('#idH2').delay(2200).show('drop',{direction:"right"},500);
-->
</script>

This script is executed after the page loads. First, the `h1` tag fades in over 1.5 seconds, then the `idDiv` is displayed with a drop effect from the left. Finally, the `h2` tag is displayed from the right, creating a sequence of animations.

The delay() method is used to adjust the timing so that each element is displayed in order, giving a flow to the animation. Additionally, you can customize the direction of the display by changing the direction parameter of the drop effect.

Demo Page Using jQuery UI’s show() Effect for Animation

It’s very important to not only understand the theory but also to check out the working demo. Click the link below to see the actual demo page in action.

Demo Using jQuery UI’s show Effect for Animation

In this demo, you can see the code introduced earlier in action. Feel the smoothness of the effects and how the timing adjustments impact the animation.

Conclusion

In this article, I explained how to display hidden elements using animations with jQuery UI’s show() effect. The show() effect is relatively easy to implement and is recommended. Additionally, by adjusting the types and timing of effects, you can create more complex and attractive animations.

Please use this article as a reference and incorporate animations into your web projects. With a little effort, you can significantly enhance the user experience. Let’s continue to integrate various technologies to create attractive websites.

* Please use it at your own risk.
Do not use the Google Analytics tag from the head tag of the demo page.