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).
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.0 Initial release