GitHub Slider JQuery Plugin
The new Github HTML5 and开发者_运维技巧 CSS3 (HTML5 History API) tree navigation is great: https://github.com/blog/760-the-tree-slider
Which JQuery Plugin are they using to do the UI slide effect? Or maybe a similar one (Jquery Slide with Ajax loading)
Thanks
I looked through their source code and they are NOT using CSS3 or a plugin. It uses jquery animate. And the code snippets they give on the Github blog are a good start, but the popstate handler is misleading. Try this instead:
$(window).bind('popstate', function (e) {
if (e.originalEvent.state && e.originalEvent.state.path) {
$.get(e.originalEvent.state.path, function(data) {
$('#slider').slideTo(data);
});
return false;
}
return true;
}
The actual sliding uses more tricks:
- set #slider overflow: hidden
- get the width of the section to animate.
- create a transfer div twice this width (transfer).
- copy the contents of the original div to a temp div (current).
- put the new contents in another temp div (next).
- put current and next side by side into transfer.
- remove content from original div and put new transfer div in (should look the same).
- animate transfer div - new look complete.
- replace original div contents with new data (looks the same as previous step).
Here's slide left:
$.fn.slideTo = function(data) {
var width = parseInt($('#slider').css('width'));
var transfer = $('<div class="transfer"></div>').css({ 'width': (2 * width) + 'px' });
var current = $('<div class="current"></div>').css({ 'width': width + 'px', 'left': '0', 'float': 'left' }).html($('#slider').html());
var next = $('<div class="next"></div>').css({ 'width': width + 'px', 'left': width + 'px', 'float': 'left' }).html(data);
transfer.append(current).append(next);
$('#slider').html('').append(transfer);
transfer.animate({ 'margin-left': '-' + width + 'px' }, 300, function () {
$('#slider').html(data);
});
}
And here's a working example: Slider example. Click on the menu with a browser that supports history. I started to use CSS3, but detecting when the transition/transform is complete is easier with the jquery animate callback.
I guess it will help you.
jquery.sliders
check this one out you might like it. very simple slider.
https://github.com/Yene-Me/Slider-Menu
精彩评论