Question

CSS3和jQuery都可以实现哈希链接导航。但我无法通过CSS3进行动画转换。而且我无法在支持它的浏览器上关闭CSS3哈希链接，导致jQuery和CSS3都希望进行移动而CSS3在10次中获胜9次。

在第一个jsfiddle有点像我希望我的页面看起来像，浏览器自动完成导航：

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

这第二个jsfiddle包含相同的页面，但加载了jQuery以及一个简单的脚本，当按下链接时应该做一些奇特的动画，但是大多数时候都太慢了。但如果你点击足够多次，你会看到动画一两次。

http://jsfiddle.net/XHSyV/

在jQuery或CSS3中进行转换有其优点和缺点。大多数情况下，我希望两者都有。如果浏览器可以进行CSS3转换，则发送方式更少的代码。如果浏览器不能，则发送jQuery代码。但最重要的是，我只想要一种效果很好的方法。

Answer 1

查看modernizr - 它会将CSS类添加到html标记，以便您了解用户的浏览器是否支持CSS3过渡。

沿着这些方向：

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

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

Answer 2

我在这里得到了一个基于jQuery的解决方案：使用localsscroll库切换hashchange lib并相应地修改源代码。看看下面的jsfiddle：

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

唯一需要添加的是标签的更新程序。

编辑：添加hash：true到localScroll修复了这个：

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

哈希导航;使用CSS3动画转换或禁用CSS3＃标签导航并使用jQuery。但是怎么样？

2 个答案: