Tag: css3

jQuery UI switchClass（）方法无法正常工作: jQuery UI switchClass()方法不切换类，而是执行一些不需要的动画，当我使用jquery.animate-enhanced.js进行硬件加速动画时，类与原始类保持相同。有关如何修复它的任何想法？

我需要一种简单的方法来使用jquery检测CSS3媒体查询支持: 我需要一种快速而肮脏的方法来使用jquery检测媒体查询支持。我定义了一个函数如下： function mediaQueriesEnabled () { var v = parseFloat($.browser.version); if ($.browser.msie) { if (v < 9) return (false); } return (true); } 有人可以帮我解决这个问题吗？看这个页面： http://caniuse.com/css-mediaqueries 我意识到这里有一些复杂性。例如，当我测试我的safari版本时，我得到“534.57.2”。我现在想避免安装modernizr，主要是因为我处于紧张状态，我需要在短期内处理大多数情况。任何帮助表示赞赏！

性能：纯CSS与jQuery: 我已经看到了纯CSS和等效的jQuery之间的一些代码比较。但我正在寻找有关为什么纯CSS比jQuery明确更快的细节。这是我见过的一些原因，但这些描述并不深入。我不确定它们是否真实。 CSS不必由浏览器评估 jQuery必须由浏览器进行评估 jQuery使用脚本语言 CSS是否必须由浏览器进行评估并且还要使用脚本语言？ CSS不像jQuery那样走DOM，还是CSS有优势呢？

非常简单的JavaScript / jQuery示例：意外的评估指令顺序: 我很惊讶在基于jQuery的CSS属性更改后通过jQuery应用的CSS3转换规则实际上动画了此属性更改。请看http://jsfiddle.net/zwatf/3/ ：最初，div由两个类设置样式，并且由于这两个类的默认CSS属性而具有一定的高度（200px）。然后通过删除一个类，使用jQuery修改高度： $(‘.container’).removeClass(‘active’); 这将高度从200px降低到15px。之后，通过添加类将转换规则应用于容器： $(‘.container’).addClass(‘all-transition’); 发生的事情是高度的降低变得生动（至少在Firefox和Chrome上）。在我的世界中，如果指令的顺序有任何意义，这不应该发生。我想这个行为可以很好地解释。为什么会这样？我该怎样预防呢？这就是我想要实现的目标：使用jQuery修改默认样式（不是通过CSS3过渡动画！）使用jQuery应用转换规则使用jQuery更改属性（通过CSS3过渡动画）（1）和（2）应该尽快发生，所以我不喜欢任意延迟。

如何在css3中检索角度？: 我有以下代码设置元素的旋转角度： $(‘#1-link-2’) .css(‘height’, length) .css(‘-webkit-transform’, ‘rotate(‘ + angle + ‘deg)’) .css(‘-moz-transform’, ‘rotate(‘ + angle + ‘deg)’) .css(‘-o-transform’, ‘rotate(‘ + angle + ‘deg)’) .css(‘-ms-transform’, ‘rotate(‘ + angle + ‘deg)’) .css(‘transform’, ‘rotate(‘ + angle + ‘deg)’); 其中角度是先前动态计算的（它基于鼠标的位置）。我需要能够检索角度。我为初学者尝试了这个： var angle= $(“#1-link-2”).css(‘-webkit-transform’); $(‘#node-title’).html(angle); //just to print it to the screen for me 它给了我这个文字 matrix(0.5425908601788315, -0.839997118120292, 0.839997118120292, 0.5425908601788315, […]

具有自动高度的CSS3翻转卡: 我正在使用一个教程来创建一个使用CSS3和jQuery的翻转卡片效果，我在调整内容长度时遇到问题，同时让它仍然在中心水平方向上翻转。小提琴。码： Front Other text. Other text. Other text. Other text. Back body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: 200px; position: relative; margin: 50px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: […]

应用CSS滤镜效果捕捉/保存/导出图像: 我正在制作一个使用CSS3滤镜效果的简单图片编辑器（饱和度，棕褐色，对比度等）制作图片编辑器很容易，但无论是否可以使用filter保存或导出图像都难以置信。我最初对@ niklasvh的html2canvas很有希望。不幸的是，它不能捕获大多数CSS3属性，更不用说过滤效果了。如果任何人有解决方案或遗憾，明确知道这是不可能的，那将非常感谢！谢谢！

页面加载时如何自动弹出CSS3模态窗口？: 我试图解决这个问题。如何让它在页面上工作。我的css .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; […]

想要在旋转时显示元素的厚度: 我正在通过CSS将硬币沿Y轴旋转90度。有没有办法让我可以在旋转之后显示硬币的厚度，我想我可以在硬币沿Y轴旋转后缩放，但这似乎不起作用。如果可能，请建议一些方法来做同样的事情。 link_on_js也是如此。请使用webkit浏览器打开链接。 CSS .coin { display: block; background: url(“url-to-image-of-coin.jpg”); background-size: 100% 100%; width: 100px; height: 100px; margin: auto; border-radius: 100%; transition: all 500ms linear; } .flip { transform: rotateY(180deg); } HTML jQuery的 $(‘.coin’).click(function() { $(this).toggleClass(‘flip’); }); 小提琴 http://jsfiddle.net/7EtLu/22/