javascript - 如果浏览器,使用 Javascript?

标签 javascript jquery animation

我有一个脚本可以检测某人使用的浏览器(和版本),我想对其进行设置,以便对于某些浏览器,div 类在悬停时获得动画。我想用 jQuery 来做这件事,但我愿意接受任何东西。

我对 JavaScript 的想法是这样的......

if (browser == IE || browser < Firefox 4) {
      // somehow animate a div class on hover (could be id-based too)
    } else {
      // do nothing
    }

我为此设置的 CSS 是这样的

.item {
  height: 100px;
  width: 100px;
  /* css3 */
  transition: height .5s, width .5s;
  -moz-transition: height .5s, width .5s;
  -webkit-transition: height .5s, width .5s;
}

.item:hover {
  height: 200px;
  width: 200px;
}

然后 HTML 是(显然)

<div class="item" id="item">
  <p>Content here</p>
</div><!-- end item -->

目的是为旧版浏览器修复 CSS3。在我看来,过渡是 CSS3 最好的东西之一,令我恼火的是 IE9 不支持它们。

最佳答案

除此之外,使用像 Modernizr 库这样的东西怎么样?

http://www.modernizr.com/

Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it.

然后你可以做这样的事情:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

关于javascript - 如果浏览器,使用 Javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5780449/

相关文章:

javascript - 使用显示 : table and margin: auto, 时图标居中对齐,但当我更改为显示 :none it does not align to center after . show()

jquery - 使用 AJAX 和 jQuery 提交表单

javascript - 如何在 JS 中制作雪花飘落的动画?

javascript - `npm run jshint` 结果为 `missing script: jshint`

javascript - Chrome Cookie API 不允许我使用返回值

javascript - 有没有办法编辑此脚本,使其仅适用于特定的选择类?

jquery - 为什么当鼠标悬停在 mouseOut 目标内的文本上时 .mouseOut() 会触发?

Android ImageView翻转动画

javascript - 如何在 D3 中为文本 anchor 设置动画

javascript - 从引用数组中删除项目( Mongoose )