An elegant transition with jQuery

Have you ever tried to reduce the width of an element,
only to see the contents

get narrower
and naro
wer

when it's squeezed together?

It wreaks havoc when you want to have some nice transitions, so this plugin solves it elegantly: the content stays visibly the same.

The plugin copies a box with HTML elements, clones it to the desired number of slices, then animates them to zero width or height, depending on the effect chosen. After animation they are removed.

For effects you can choose between "blinds", "incremental blinds" and "sweep up". The number of slices are capped at ten to retain some smoothness. You will have to play around with the numbers.

The effects degrade gracefully: without Javascript the boxes are shown below each other.

Download from Github

This project is part of my Playground - a collection of fun (and dare I say it: clever) stuff I made in the past, from jQuery games and plugins to CSS animation tricks.

Please drop in on my portfolio site www.rayhyde.nl!

Only Electrolux sells:

The cleaner you never have to empty

This box contains normal HTML elements, such as this <p> tag. Voluptas, minima fugiat vel aspernatur est aliquid perspiciatis sit exercitationem optio fuga dolor reiciendis sequi.

Hair like yours needs a shampoo like ours.

Wella Balsam Shampoo. The longer your hair is, the more chance it has to get thin, broken and dull. Hot combs and too much sun and wind can weaken the ends of your hair.

# of slices: (max. 10)

Effect:


Click me

How to use this plugin

1. Link the files you need

Include the jQuery script at the bottom of your page, e.g. through a CDN:

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>

Then include the minimized version of the script:

<script src="[path to your script]/jquery.elegant_transition.min.js"></script>

Change [path to your script] to where it resides, eg "js".

2. Create your HTML markup

This is very simple: create an element that contains the boxes that need to be transitioned. Be sure to include the class names box, box1 and box 2. Wrap your box content in element with class name inner:

<div id="transition-wrap">

  <div class="box box1">
    <div class="inner">
      [You HTML markup goes here]
    </div>
  </div>

  <div class="box box2">
    <div class="inner">
      [You HTML markup goes here]
    </div>
  </div>

</div>

3. Add the css files to the <head> section of your page

The file elegant_transition.css does not need to be changed (though you can and probably will); the file theme.css contains some colours and it may contain the css for what you stick in the boxes. LESS files are provided.

4. Call the plugin

Then initialize the plugin, telling it in which element it needs to run:

<script>
  $(<containing element here, e.g. "#transition-wrap">).elegantTransition({
    speed: 500, // sets the transition speed
    effect: 'blinds', // choose between "blinds", "incblinds" or "sweep"
    slices: 5 // sets the number of slices (max 10)
  });
</script>

Download from Github