Jquery plugin to slide and fade elements

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).

jQuery Script
jQueryscript.net
is one of the best websites
to preview and download
latest and most popular
free jQuery plugins on the web.

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:

Pussy said to the Owl,
You elegant fowl!
How charmingly sweet you sing!
O let us be married!
too long we have tarried:
But what shall we do for a ring?

Release history

0.9.0 Initial release