Animate container instead of child elements
HTML
<ul class="paging">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
CSS
h1, h2, ul {
clear: both;
}
ul.paging li, ul.paging2 li {
padding: 10px;
background: #83bd63;
font-family: georgia;
font-size: 24px;
color: #fff;
line-height: 1;
width: 180px;
margin-bottom: 1px;
}
ul.red {
outline:10px solid red;
}
ul.simplePagerNav li {
display:block;
floaT: left;
padding: 3px;
margin-bottom: 10px;
font-family: georgia;
}
ul.simplePagerNav li a {
color: #333;
text-decoration: none;
}
li.currentPage {
background: red;
background: #83bd63;
}
ul.simplePagerNav li.currentPage a {
color: #fff;
}
table.pageme {
border-collapse: collapse;
border: 1px solid #ccc;
}
table.pageme td {
border-collapse: collapse;
border: 1px solid #ccc;
}
JavaScript
(function ($) {
$.fn.quickPager = function (options) {
var defaults = {
pageSize: 1,
currentPage: 1,
holder: null,
pagerLocation: "after"
};
var options = $.extend(defaults, options);
return this.each(function () {
var selector = $(this);
var pageCounter = 1;
selector.wrap("<div class='simplePagerContainer'></div>");
selector.parents(".simplePagerContainer").find("ul.simplePagerNav").remove();
selector.children().each(function (i) {
if (i < pageCounter * options.pageSize && i >= (pageCounter - 1) * options.pageSize) {
$(this).addClass("simplePagerPage" + pageCounter);
} else {
$(this).addClass("simplePagerPage" + (pageCounter + 1));
pageCounter++;
}
});
// show/hide the appropriate regions
selector.children().hide();
selector.children(".simplePagerPage" + options.currentPage).show();
if (pageCounter <= 1) {
return;
}
//Build pager navigation
var pageNav = "<ul class='simplePagerNav'>";
for (i = 1; i <= pageCounter; i++) {
if (i == options.currentPage) {
pageNav += "<li class='currentPage simplePageNav" + i + "'><a rel='" + i + "' href='#'>" + i + "</a></li>";
} else {
pageNav += "<li class='simplePageNav" + i + "'><a rel='" + i + "' href='#'>" + i + "</a></li>";
}
}
pageNav += "</ul>";
if (!options.holder) {
switch (options.pagerLocation) {
case "before":
selector.before(pageNav);
break;
case "both":
selector.before(pageNav);
...