gpt4 book ai didi

CSS3 转换的 JQuery 回退

转载 作者:技术小花猫 更新时间:2023-10-29 11:13:58 25 4
gpt4 key购买 nike

我正在为简单的 CSS3 转换代码寻找 JQuery/JS 回退。我的 javascript 非常基础,所以找到并编写替换代码对我来说并不容易。我已经查看了 modernizr,但我并没有真正理解很多文档。

这是一个在鼠标悬停时使用 transform: rotate(20deg) 的图标(这不是问题,因为它在 IE 中支持)。但是问题是过渡,我正在使用

  .icon{
....other css code
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}

是否有 JQuery 后备方案?我在考虑 fadeIn(); 但我不知道如何编写代码。是这样的吗?:

<script>$(icon).hover(function (){$(icon).fadeIn("slow");}); </script>

我如何让浏览器知道它是后备,以便他们只选择 IE 时的 JQuery?

最佳答案

我想你已经有了答案,你应该使用modernizr,它并不像你想象的那么复杂,modernizr有两种方式指定哪些是可用的,哪些是不可用的,第一种是通过一组CSS HTML 元素中的类:

<html class="js no-flexbox canvas canvastext postmessage no-websqldatabase ... ">

如果可用则显示名称,如果不可用则显示带有“no-”前缀的名称,如“no-flexbox”,第二个是通过 javascript:

if(!Modernizr.csstransitions)

Modernizr 有一组 bool 变量,可以告诉你它是否可用,所以如果你想为你的动画设置一个回退,我建议你使用 Modernizr 类来指定仅适用于浏览器的动画具有此功能:

.csstransitions #element{
-webkit-transition: ... ;
-moz-transition: ... ;
-o-transition: ... ;
-ms-transition: ... ;
transition: ... ;
}

然后使用 modernizr 检查功能是否可用的变量创建一个 javascript 文件,如果不可用则指定动画:

if(!Modernizr.csstransitions)
$("#element").hover(function(){ $(this).animate({ ... your animation ... }, 5000); });

这可能会让您了解 Modernizr 的工作原理(我希望如此),无论如何,如果您遇到问题,可以查看此 blog post我很久以前做过,它说了类似这样的东西和其他一些东西,比如 CSS3PIE(这不是垃圾邮件,我只是想帮忙)。

关于CSS3 转换的 JQuery 回退,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15683067/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com