jQuery transition effect in HTML elements with animation

Creating transition effect in HTML elements by jQuery

In this demo, you are going to see and learn how to create transition effect in two HTML elements with jQuery.

You may use the different type of content in the HTML elements like headings, text paragraphs, images etc. The plug-in allows using only two elements currently. Upon the user’s action like clicking the button, the second section appears with jQuery effect. You may use three different type of effects:

  • Blinds
  • Incremental blinds
  • Sweep up

Have a look at the demo with different effects and options available in the following section. The plug-in name is elegant_transition that you may download here.

A demo of transition effect with blinds and other options

In the demo page, you can see the first section of HTML where transition effect will occur. In the second section, a few options are given along with “Click for jQuery effect” “button”. You may select “Blinds”, “Incremental blinds” and “Sweep Up” options from the radio group.

Besides, you may also select the number of slices with the maximum of 10 value.  Have a look:

jquery effect

jquery effect sweep

See online demo and code

The following markup is used in the example:

 

The script:

 

 

In the script, you can see the speed option is set. You may set the speed in milliseconds. The number of slices is 5 while the effect used is “blinds”.

Also note that the respective values to be used for the Blinds, Incremental blinds and Sweep up effects are blinds, incblinds and sweep.