How to Add Transition Effects to Web Pages

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Add Transition Effects to Web Pages
Transitions allow users to interact with your Web page content. (computer mouse image by haruspex from

Transition effects make a Web page seem more dynamic, providing a media-rich, interactive experience for visitors. Many different styles of transition can be used for images and other Web page content. If you want to create slide-shows for a series of images, or perhaps show and hide using transitions, you can do so using JavaScript and CSS. Transition effects are commonly carried out using jQuery, which is both free and easy to use.

Skill level:


  1. 1

    Download the jQuery JavaScript library, which has numerous effects for adding animation and interactivity to Web pages. Many developers have also created implementations of the jQuery code that add advanced effects to Web content. These resources are easy to use, as you simply download the jQuery plug-in you want and follow the instructions. (See References 1, 2)

  2. 2

    Prepare your content, whether it's text, images or other media. Most jQuery transition effects include all of your content within the page, but keep parts of it hidden at first. These effects are a way to include more content within a page than what is visible at any one time, with additional content presented as the user interacts with the page.

  3. 3

    Place the jQuery script on your Web server and include a link to it in the head of your Web pages. Use the following syntax, making amendments to suit the name and location of your file if necessary:

    <script type='text/JavaScript' src='jquery.min.js'></script>

    Make sure the script is in the correct location, relative to your Web page. (See References 3)

  4. 4

    Include the code for your jQuery plug-in. The plug-in you have chosen will have specific instructions, but typically you will have to include code in the head of your pages comprising the script itself or a link to a separate script. jQuery code generally runs when your page has loaded in the browser, as the following example code, listed in the page head section:

    <script type='text/JavaScript(function()

    { $('a.tablink').click(function()

    { var id = $(this).attr('id');

    $('#contentarea' + id).toggle(500);

    return false; }); });


    (See References 3)

  5. 5

    Organise the content of your Web page for the transition effect to work. Following the instructions for your jQuery plug-in, include the content of your pages within structures that allow the transition to function, as in the following example. Within the page body:

    <a href='#' id='part 1' class='tablink'>Here is the click-able area</a>

    <div id='contentareapart1' class='contentsection'>Here is the hidden content</div>

    Add style declarations to initially hide parts of the content. Within your CSS code:


    {display: none;}

    Test your pages thoroughly. (See References 4)

Tips and warnings

  • Adjust any settings you can through your jQuery plug-in to tailor the transition effects to your site. There are options in terms of transition style and speed, and you can include visual styling to complement your site as a whole.
  • Don't assume that transition effects will appear properly for all visitors to your site. Users with old or mobile browsers may not see the effects in the same way, which is why testing is so important.

Don't Miss


  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.