0

CSS3 和 jQuery 都可以实现哈希链接导航。但我无法使用 CSS3 进行动画转换。而且我不能在支持它的浏览器上关闭 CSS3 哈希链接，导致 jQuery 和 CSS3 都想要做这个动作，而 CSS3 十有八九获胜。

在这第一个 jsfiddle 中，我希望我的页面看起来像这样，导航是由浏览器自动完成的：

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

第二个 jsfiddle 包含相同的页面，但加载了 jQuery 以及一个简单的脚本，该脚本应该在按下链接时做一些花哨的动画，但大多数时候太慢了。但是，如果您单击的次数足够多，您将看到一次或两次动画。

http://jsfiddle.net/XHSyV/

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

4

2 回答 2

1

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

沿着这些思路：

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

$('.nocsstransitions #someselector').on('mouseover', function(){
    // do nifty jQuery animation
}
于 2012-04-29T23:49:59.820 回答
1

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

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

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

编辑：将 hash:true 添加到 localScroll 解决了这个问题：

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

于 2012-04-30T10:11:13.973 回答