Simple Slide and Fade Out Html Elements Plugin with jQuery

A lightweight and easy to set up jquery plugin that enables you to slide and fade out html elements randomly in a container.

Basic Usage:

1. Include jQuery library and jquery.slideandfade.js on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.slideandfade.min.js"></script>

2. Markup html structure

<div class="display-screen-description" id="display-screen1">
<div class="displayBox" id="displayBox1_0">
<div class="fragment" id="a">jQuery Script</div>
<div class="fragment" id="b">jQueryscript.net</div>
<div class="fragment" id="c">is one of the best websites</div>
</div>
<div class="displayBox" id="displayBox1_1">
<div class="fragment" id="d">to preview and download</div>
<div class="fragment" id="e">latest and most popular</div>
<div class="fragment" id="f">free jQuery plugins on the web.</div>
</div>
</div>

3. The CSS

div.display-screen-description {
width: 400px;
height: 300px;
margin: 20px auto 20px auto;
background-color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border: 1px solid #cccccc;
}
div.displayBox {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 300px;
overflow: hidden;
visibility: hidden;
background-color: #ffffff;
}
div.fragment {
position: absolute;
width: 345px;
height: 22px;
color: #9B9B9B;
font-size: 22px;
line-height: 22px;
font-family: Helvetica, arial, sans-serif;
font-weight: normal;
}
#a {
top: 30px;
left: 30px;
}
#b {
top: 60px;
left: 30px;
}
#c {
top: 90px;
left: 30px;
}
#d {
top: 188px;
left: 30px;
}
#e {
top: 218px;
left: 30px;
}
#f {
top: 248px;
left: 30px;
}
#g {
top: 30px;
left: 30px;
}
#h {
top: 60px;
left: 30px;
}
#i {
top: 90px;
left: 30px;
}
#j {
top: 188px;
left: 30px;
}
#k {
top: 218px;
left: 30px;
}
#l {
top: 248px;
left: 30px;
}

4. The javascript

$(function() {

    var screenToDisplay1 = 1;
    var displayScreen1 = $('#display-screen1');
    displayScreen1.click(function() {
        var settings = {callback : function() { screenToDisplay1 = screenToDisplay1 == 0 ? 1 : 0; } };
        $('#display-screen1').slideandfade($('#displayBox1_'+screenToDisplay1), settings );
    });
    displayScreen1.slideandfade($('#displayBox1_0'));

});

Change Log:

v0.9.2 (2013-03-30)

• Remove multiple creations of jQuery objects.

v0.9.1 (2013-03-30)

• tidy up code

---

This awesome jQuery plugin is developed by Ian Macinnes. For more Advanced Usages, please check the demo page or visit the official website.