Tag: css3

将hover手风琴转换为onclick: 我有一个用纯css3开发的手风琴菜单。目前它是hover在它上面时打开菜单但我希望它在点击时打开。我能做到这一点吗？还有一个帮助。目前内容div位于标题的右侧，但我需要在左侧打开它。并且内容div应该具有基于内容的自动宽度。这是DEMO

从DOM中删除兄弟元素时，创建块元素的平滑过渡: 我有一个类似于mac os中的通知的容器 – 元素被添加到队列中并在某个超时后被删除。这很好用，但有一个不和谐的视觉副作用。当从DOM中删除它们时，对UI进行锯齿状更新，因为堆栈中的下一个元素填充了前一个元素创建的空白。我希望堆栈中的下面的元素能够顺利地向上移动到那个空间，理想情况下是使用css3，但是添加了一个transition: all 0.5s ease-in-out当删除它的兄弟时，对于.notice类的transition: all 0.5s ease-in-out进入对该对象都没有影响。最小的JS干涉： $(‘#add’).click(function(e) { e.preventDefault(); $(‘#container’).append(‘Notice #’); }); $(‘body’).on(‘click’,’p.notice’, function(e) { $(this).fadeOut(); }); 更好的是在这里摆弄： http://jsfiddle.net/kMxqj/ 我正在使用MVC框架对这些对象进行数据绑定，因此一些原生css / jQuery比Jq插件更受欢迎。

在类更改后重新计算jQuery中的元素高度: 我有一个项目列表，根据标准，它通过jQuery on document.ready获取一个类，触发CSS3列。如果列表以列显示，则其高度将更小。有没有办法在课程更改后立即在jQuery中获得新的高度？ $items.each(function(i){ var theItem = this; console.log($(theItem).height()); //extended layout if ( theCriteria ) { $(theItem).addClass(‘extended’); console.log(‘after’, $(theItem).height()); } } 上面的代码返回两个调用的初始高度。我猜我需要触发别的东西。

CSS3 Transition不再在Chrome中运行了: 据我所知，到目前为止，我对CSS3过渡没有任何问题。突然（可能是因为对我的代码进行了Chrome更新或其他修改），它刚刚停止使用chrome（32.0.1700.77），但仍适用于所有其他浏览器（以及较旧版本的chrome）。 @media screen and (max-width: 1325px) { .row-offcanvas { position: absolute; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%; } button.toggle { display: inline-block; } .row-offcanvas-left, .sidebar-offcanvas { left: -239px; z-index: 9999; height: 700px; } .row-offcanvas-left.active { left: 239px; } .sidebar-offcanvas { position: absolute; top: 0; width: 239px; […]

CSS3在动画元素上旋转，导致不调用click事件: 好吧，这个问题给我带来了很多问题。当使用css3 -webkit-transform样式和任何类型的3d旋转（例如rotateY(30deg) ）时，将click事件绑定到此旋转对象是极不可靠的。请参阅下面的示例代码或查看此小提琴（要查看小提琴中的不可靠性，请单击元素的右侧）。此示例没有动画但仍受影响。 HTML： Click this box. CSS： #box1{ -webkit-transform: rotateY(30deg); } jQuery的： $(‘#box1’).click(function(){ alert(‘clicked box 1′); }); 我的意思是’不可靠’是不会总是抛出click事件（取决于你点击它的位置），有时事件根本不会抛出（无论你在哪里点击它）。有没有办法来修复或避免这种情况，以便在旋转和动画时使用CSS3元素？更新：在元素上使用CSS属性“float：left”似乎允许它在不运动时正确检测点击事件。有谁知道为什么浮动属性修复了这个？我的最终目标是让对象在运动中接收点击事件，但是，当我应用新的CSS3 rotate3d属性（实时，在另一个jquery事件上）来给对象动画时，click事件再次开始失败。

为什么这个CSS3在高度上的过渡不起作用: 我一直在手风琴中工作，但由于一些奇怪的原因，下面的代码： .collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height .35s ease; -moz-transition: height .35s ease; -o-transition: height .35s ease; transition: height .35s ease; } .collapse.in { height: auto; } Accordion Pane 1 content $(‘.something’).click(function(event){ event.preventDefault(); $(this).next(‘.accordion-body’).toggleClass(‘in’); }) http://jsfiddle.net/CvdXK/ 似乎没有用。高度没有动画。我不知道为什么。首先十分感谢。

如何开发视网膜显示网站？: 我必须开发一个响应式网站，有4种设计[桌面，移动，平板电脑和视网膜显示]。前三个很好，可以做，但视网膜显示在一个新的东西。因此，如果任何人都可以分享正确的方法来为它开发HTML，那将会非常有用。任何Jquery插件，HTML / CSS的Hack都会有所帮助！非常感谢！

使用CSS和JS创建金字塔: 我有一个包装div和许多内容块。内容块可以是任何数字。 Something goes here Something goes here . . . Something goes here 我希望使用这些内容块形成金字塔结构，如下所示：是否有可能实现这样的金字塔？上面的图片只是一个例子，可以有超过10个内容块甚至更少。

如何自定义水平jQuery-移动单选按钮: 我们的客户需要为jQuery-mobile定制设计单选按钮样式。实际上它与水平模式下的默认jQuery-mobile单选按钮设计非常相似。例如，jQuery-mobile将水平单选按钮定义为 I like to buy and wear trendy must-haves 1 2 3 4 5 此外，我们的客户希望在lablel下面显示默认的单选按钮。例如下面的图像我想知道jQuery-mobile是否允许我们显示默认的单选按钮？如果是这样，你能举个例子吗？或者我们需要自定义吗？

IE11 – 通过jQuery.toggleClass（）切换类不激活IE11中的类 – 它适用于所有其他浏览器: 这适用于IE 11以外的所有浏览器。我的代码很基本。单击文本以切换“无限”类，其中（应该）永远循环反弹效果。 IE11将类应用于H1标签，但它不会像在所有其他浏览器中那样无限制地动画。预期的行为是它在加载时弹跳一次（这个工作）并单击文本应用“无限”类，它应该使它永远弹回（这在IE 11中不起作用）。 $(window).ready(function(){ $(‘h1’).on(‘click’,function(){ $(‘h1’).toggleClass(‘infinite’); }); }); Example 我在Windows 7上使用IE 11.0.9600.17239 这是另一个在开始时应用所有类的示例： Example 在发布第二个例子后，这让我相信这是一个结合IE 11的某种类型的jQuery问题…