Jquery plugin to slide and fade elements

Author: Ian Macinnes

Docs: Here

GitHub repo: Here

This page described the slide and fade jQuery plugin, which can be used as a very simple and quick method of sliding whole groups of elements out of frame and moving other ones in. It's under active development so please contact the author for fixes/suggestions etc.

Moving groups of elements around

The plugin can simply make divisions flying around. Below is an example - click on the box to see it working. Each group of elements should be of the class 'displayBox' and each element should be of the class fragment (I'll make this configurable via the options soon).

Here's the HTML code for displaying the above box:

<div class="display-screen-description" id="display-screen">
  <div class="displayBox" id="displayBox0">
    <div class="fragment" id="a">The owl and the pussy cat</div>
    <div class="fragment" id="b">Went to sea</div>
    <div class="fragment" id="c">In a beautiful pea green boat</div>
  </div>
  <div class="displayBox" id="displayBox1">
    <div class="fragment" id="d">They took some honey,</div>
    <div class="fragment" id="e">And plenty of money</div>
    <div class="fragment" id="f">Wrapped up in a five pound note.</div>
  </div>
</div>

The code to move a particular display box into shot is:

$('#display-screen').slideandfade($('#displayBox0'));

You can also specify an optional callback for after the whole process is finished. You use a settings dictionary to pass along various options. Above, I use an option called callback to toggle which text to display. This callback is always called after the text has been moved into position.

var screenToDisplay = 1;
$('#display-screen').click(function() {
  var settings = {
      callback : function() {
        screenToDisplay = screenToDisplay === 0 ? 1 : 0;
      }
  };

  $('.display-screen').slideandfade($('#displayBox' + screenToDisplay),
                                    settings);
});

It's also easy to have two slideandfade boxes on the same page:

Release history

0.9.2 Made sure the creation of jQuery object was kept to a minimum. Now noticeably smoother than the initial version.

0.9.1 Tidied up code significantly after code review by Andy Baker and Dan.

0.9.0 Initial release.