Я просмотрел их исходный код, и они НЕ используют CSS3 или плагин.Он использует JQuery Animate.И фрагменты кода, которые они дают в блоге Github , являются хорошим началом, но обработчик popstate вводит в заблуждение.Попробуйте вместо этого:
$(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;
}
Фактическое скольжение использует больше трюков:
- set #slider overflow: hidden
- получает ширину секции для анимации.
- создайте перевод div в два раза больше этой ширины (передача).
- скопируйте содержимое исходного div в временный div (текущий).
- поместите новое содержимое в другойtemp div (следующий).
- помещает текущий и следующий бок о бок в передачу.
- удаляет содержимое из исходного div и помещает новый div передачи в (должен выглядеть так же).
- анимация передачи div - новый внешний вид завершен.
- замена исходного содержимого div новыми данными (выглядит так же, как и в предыдущем шаге).
Вот слайд влево:
$.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);
});
}
А вот рабочий пример: Пример слайдера .Нажмите на меню с браузером, который поддерживает историю.Я начал использовать CSS3, но с помощью обратного вызова jquery animate легче определить, когда завершен переход / преобразование.