Those sliding effects are pretty simple to replicate with just some
basic jQuery and JavaScript. Plugins are nice for encapsulating
functionality that you use often, but many times it's just as easy to
write something yourself; it often takes fewer lines of code as well,
since you're not having to account for multiple use cases. Here's a
quick example in jQuery to replicate the bi-directional sliding from
the link you posted:
HTML (slightly modified from the example):
<p>
Navigate by index:
<a href="#">1</a> |
<a href="#">2</a> |
<a href="#">3</a> |
<a href="#">4</a> |
<a href="#">5</a> |
<a href="#">6</a> |
<a href="#">7</a> |
<a href="#">8</a> |
<a href="#">9</a>
</p>
<div id="example" class="SlidingPanels" tabindex="0" style="overflow:
hidden;">
<div class="SlidingPanelsContentGroup">
<div id="ex3_p1" class="SlidingPanelsContent p1">Panel 1</div>
<div id="ex3_p2" class="SlidingPanelsContent p2">Panel 2</div>
<div id="ex3_p3" class="SlidingPanelsContent p3">Panel 3</div>
<div id="ex3_p4" class="SlidingPanelsContent p4
SlidingPanelsCurrentPanel">Panel 4</div>
<div id="ex3_p5" class="SlidingPanelsContent p5">Panel 5</div>
<div id="ex3_p6" class="SlidingPanelsContent p6">Panel 6</div>
<div id="ex3_p7" class="SlidingPanelsContent p7">Panel 7</div>
<div id="ex3_p8" class="SlidingPanelsContent p8">Panel 8</div>
<div id="ex3_p9" class="SlidingPanelsContent p9">Panel 9</div>
</div>
</div>
CSS (modified and condensed from the example):
#example {
overflow:hidden;
position:absolute;
height:300px;
width:300px;
}
#example .SlidingPanelsContentGroup {
float:left;
width:900px;
top:0;
left:0;
margin:0;
padding:0;
position:relative;
}
.SlidingPanelsContent {
float:left;
height:300px;
width:300px;
}
.p1 {
background-color:#CCCC66;
}
.p2 {
background-color:#FFFFCC;
}
.p3 {
background-color:#6699FF;
}
.p4 {
background-color:#99CCCC;
}
.p5 {
background-color:#FF99CC;
}
.p6 {
background-color:#339933;
}
.p7 {
background-color:#9933FF;
}
.p8 {
background-color:#669966;
}
.p9 {
background-color:#00FFCC;
}
JS:
$(document).ready(function(){
var navindex = $('p a');
navindex.click(function(){
var pos = navindex.index(this),
topPos = -(Math.floor((pos/3)%3)*300),
leftPos = -(Math.floor((pos)%3)*300);
$('.SlidingPanelsContentGroup').animate({'top':topPos
+'px','left':leftPos+'px'});
return false;
});
});
The above code only uses the index of the div to slide to, but it
would be simple to use the ID as well. I'll leave it as an exercise
for you :)
On Mar 9, 8:35 am, Jon <cakeordeat...@gmail.com> wrote:
> I'm looking for something that replicates the functionality of the
> below:
>
> http://labs.adobe.com/technologies/spry/samples/slidingpanels/Sliding...
>
> I'm sure i've seen something somewhere that did this in JQuery but i
> can't find anything similar! I've search the plugin repository and
> Google but i can't find anything! Sometimes the net is just too big,
> though i'm starting to think that maybe i was imagining it?
>
> The one i remember had different types of transitions. Sliding
> diagonally or sliding New York city block style.
