Here’s our list of nice Transition Effect Plugins made with jQuery. From smooth transitions to overlapping animations, these effects are designed to generate animated switches between different elements. Enjoy!

Related Posts:

1. InnerFade

Is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.


Source + Demo

2. HighlightFade

Highlights, rescaling and some other cool effects, 100% jQuery.


Source + Demo

3. Dynamic Page / Replacing Content

An elegant menu with some animated transitions from button to button.

Dynamic Page / Replacing Content


4. jqFancyTransitions

Is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.


Source + Demo

5. jQuery Cycle Plugin – Effects Browser

An extended list of jQuery effects to use with your thumbnails, you can notice some of the effects on the screenshot.

jQuery Cycle Plugin – Effects Browser

Source + Demo

6. Image Cross Fade Transition

Well transition effect, the screenshot can provide you an idea of how does it work.

Image Cross Fade Transition

Source + Demo

7. Creating a fading header

It’s nice to use animation effects on a header, it gives a lot of dynamic to the site.

Creating a fading header


8. jQuery Cycle Plugin

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

jQuery Cycle Plugin

Source + Demo

9. Flip

Great transitions made with pure jQuery, it seem like it was made with Flash or something.


Source + Demo

10. Advanced Slider – jQuery XML slider

Is a jQuery plugin that allows you to easily create powerful sliders using either XML, thus making the slider much easier to setup and maintain, or using HTML markup.

Advanced Slider - jQuery XML slider


Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.