css3 - 散列导航;使用CSS3或者禁用CSS3标签导航和使用jQuery动画转换 但如何?

  显示原文与译文双语对照的内容
100 0

CSS3和jQuery都可以实现散列链接导航。但是我无法用CSS3来实现动画的转换。我不能在支持它的浏览器上关闭purequery哈希链接 fallowing,这两者都需要使用 to 。

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

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

第二个jsfiddle包含同一页,但是加载了一个简单的脚本,当链接被按下时太慢了。但是如果你点击足够的时间你会看到动画一次或者两次。

http://jsfiddle.net/XHSyV/

在jQuery或者CSS3中进行转换有它的优点和缺点。大多数情况下我希望。如果浏览器可以进行CSS3转换,那么发送 LESS 代码。如果浏览器不能,发送jquery代码。但我最想要的只是一种方法。

时间:原作者:2个回答

117 5

看看 modernizr它将向标签添加CSS类,这样你就知道用户的浏览器是否支持CSS3转换或者不支持 CSS3 。

沿着这些线:

.csstransitions #someselector:hover {
//do some fancy css3 transition here
}
$('.nocsstransitions #someselector').on('mouseover', function(){
//do nifty jQuery animation
}
原作者:
...