Хэш-навигация; Либо анимируйте переходы с помощью CSS3, либо отключите навигацию по хэштегам CSS3 и используйте jQuery. Но как?

И CSS3, и jQuery могут реализовывать навигацию по хеш-ссылкам. Но я не могу заставить переход анимироваться с помощью CSS3. И я не могу отключить хеш-ссылку CSS3 в браузерах, которые ее поддерживают, в результате чего и jQuery, и CSS3 хотят выполнить движение, а CSS3 выигрывает в 9 случаях из десяти.

В этом первом jsfiddle я хочу, чтобы моя страница выглядела так, навигация выполняется браузером автоматически:

http://jsfiddle.net/mg7Bw/2/

Этот второй jsfiddle содержит ту же страницу, но с загруженным jQuery вместе с простым скриптом, который должен выполнять какую-то причудливую анимацию при нажатии на ссылки, но в большинстве случаев он слишком медленный. Но если вы нажмете достаточное количество раз, вы увидите анимацию один или два раза.

http://jsfiddle.net/XHSyV/

Выполнение переходов в jQuery или CSS3 имеет свои преимущества и недостатки. В основном я хотел бы иметь оба. Если браузер может выполнять переходы CSS3, отправляйте меньше кода. Если браузер не может, пришлите jQuery-код. Но больше всего мне нужен один метод, который хорошо работает.


jquery css hashtag transitions
person Rovanion    schedule 29.04.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Взгляните на modernizr — он добавит классы CSS к тегу html, чтобы вы знали, поддерживает ли браузер пользователя Переходы CSS3 или нет.

Вдоль этих строк:

.csstransitions #someselector:hover {
    // do some fancy css3 transition here
}

$('.nocsstransitions #someselector').on('mouseover', function(){
    // do nifty jQuery animation
}
person vzwick    schedule 29.04.2012

arrow_upward
1
arrow_downward

У меня есть одно решение, основанное на jQuery: отключите библиотеку hashchange с библиотекой localsscroll и соответствующим образом измените источник. Посмотрите на следующий jsfiddle:

http://jsfiddle.net/XHSyV/1/

Единственное, что нужно добавить, это средство обновления для хэштега.

РЕДАКТИРОВАТЬ: Добавление hash:true к localScroll исправило это:

http://jsfiddle.net/XHSyV/2/

person Rovanion    schedule 30.04.2012