Ответ 1
Я просмотрел их исходный код, и они НЕ используют CSS3 или плагин. Он использует анимацию jquery. И фрагменты кода, которые они дают в Github blog, являются хорошим началом, но обработчик 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 в temp div (текущий).
- поместите новое содержимое в другую временную строку div (далее).
- помещать ток и следующий бок о бок в передачу.
- удалить содержимое из оригинального div и поместить новый перевод div в (должен выглядеть одинаково).
- animate transfer 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.