背景图像过渡的jQuery后备答案

【问题标题】：jQuery fallback for background image transition背景图像过渡的jQuery后备
【发布时间】：2013-02-22 08:23:56
【问题描述】：

我有一个脚本，它以设定的间隔在一组预加载的图像之间旋转以更改背景图像。我正在使用过渡 (transition: background-image 2s ease) 进行旋转交叉淡入淡出，但目前只有 Chrome 支持。

我可以使用 jQuery 修改脚本以动画元素淡出、更改源然后淡入，但启用此脚本会覆盖 Chrome 的行为。作为一个侧面/替代问题，是否可以使用 jQuery 模拟交叉淡入淡出？

如何让 Chrome 使用 CSS 过渡并强制所有其他浏览器使用 jQuery 动画？

我正在使用 Modernizr，但我认为功能检测不会像大多数其他现代浏览器一样使用 csstransitions 类，即使它们不支持某些特定的转换，如 background-image，但我会很高兴如果有人能证明我错了。

【问题讨论】：

你可以使用 navigator 对象来查找客户端是否是 chrome 浏览器广告将你的代码置于条件下。

标签： jquery background-image css-transitions fallback

【解决方案1】：

你可以使用导航器对象来查找客户端是否是chrome浏览器广告将你的代码置于条件下。

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 
if($.browser.chrome){
/*code for chrome browser*/

}
else{
/*code for other browser*/
}

希望有帮助

【讨论】：

我喜欢这种方法。第一行使用正则表达式，以防您对奇怪的语法感到疑惑。 developer.mozilla.org/en-US/docs/JavaScript/Guide/…
我不确定这有多优雅，但我将您的代码用作框架，而是在我的 index.php 文件底部添加了一个 PHP 检查，如以下问题所述：stackoverflow.com/questions/3047894/…然后我在函数中添加了一个条件来检查该全局变量 (isChrome) 并相应地执行相应的代码。