Demo Jquery Animated Grid Plugin

This is a simple demo of Jquery animated Grid Plugin :

<script>
$(document).ready(function(){
$('#wrapperGrid').animatedGrid();
});

Main Categorie 1

Sub Section 1
Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.

Test

Main Categorie 2

Sub Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.

Main Categorie 3

Sub Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.
Sub Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.

Test
Sub Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida augue. Nulla sit amet risus lobortis sapien volutpat pulvinar. Suspendisse potenti. Vivamus mattis, lectus ut placerat ornare, tellus ante faucibus orci, non mollis purus libero quis erat. Nam velit erat, posuere non convallis non, varius fermentum leo. Phasellus ut iaculis neque.




This demo using only class / autoCloseCell = true / + funny jumping effect :

<script>
$(document).ready(function(){
$('#wrapperGridUsingClass').animatedGrid({categorieClass:'mainCategorie', mainTitle: 'div.mainTitle', subSection:'div.subSection', subTitle:'div.subTitle', content:'div.content', autoCloseCell:true });
});
Main Categorie 1
Subtitle 01
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lobortis velit, eu dictum odio rhoncus eget. Nam iaculis vestibulum quam, at facilisis ligula viverra a.
Subtitle 02
Sed interdum pellentesque tellus, sit amet vehicula turpis laoreet ut. Aenean ante erat, dapibus ac lobortis id, posuere non eros. Nullam sed augue in ipsum aliquet porta sit amet sit amet metus. Nunc scelerisque metus id ipsum varius malesuada. Vivamus ullamcorper velit at ligula mattis ultrices.
Subtitle 03
Fusce in diam et purus ultrices lobortis. Vivamus pulvinar congue fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed mattis augue.
Main Categorie 2
Subtitle 01
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lobortis velit, eu dictum odio rhoncus eget. Nam iaculis vestibulum quam, at facilisis ligula viverra a.
Subtitle 02
Sed interdum pellentesque tellus, sit amet vehicula turpis laoreet ut. Aenean ante erat, dapibus ac lobortis id, posuere non eros. Nullam sed augue in ipsum aliquet porta sit amet sit amet metus. Nunc scelerisque metus id ipsum varius malesuada. Vivamus ullamcorper velit at ligula mattis ultrices.
Subtitle 03
Fusce in diam et purus ultrices lobortis. Vivamus pulvinar congue fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed mattis augue.
Main Categorie 3
Subtitle 01
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lobortis velit, eu dictum odio rhoncus eget. Nam iaculis vestibulum quam, at facilisis ligula viverra a.
Subtitle 02
Sed interdum pellentesque tellus, sit amet vehicula turpis laoreet ut. Aenean ante erat, dapibus ac lobortis id, posuere non eros. Nullam sed augue in ipsum aliquet porta sit amet sit amet metus. Nunc scelerisque metus id ipsum varius malesuada. Vivamus ullamcorper velit at ligula mattis ultrices.
Subtitle 03
Fusce in diam et purus ultrices lobortis. Vivamus pulvinar congue fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed mattis augue.
Main Categorie 4
Subtitle 01
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lobortis velit, eu dictum odio rhoncus eget. Nam iaculis vestibulum quam, at facilisis ligula viverra a.
Subtitle 02
Sed interdum pellentesque tellus, sit amet vehicula turpis laoreet ut. Aenean ante erat, dapibus ac lobortis id, posuere non eros. Nullam sed augue in ipsum aliquet porta sit amet sit amet metus. Nunc scelerisque metus id ipsum varius malesuada. Vivamus ullamcorper velit at ligula mattis ultrices.
Subtitle 03
Fusce in diam et purus ultrices lobortis. Vivamus pulvinar congue fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed mattis augue.




back to main