我已经得到了一组简单的卡片,我需要点击它.问题是当变换完成后,背面(蓝色侧)消失.它会在动画中显示回到正面.
我知道这可能是一个简单的解决方案而且很简单,但可能不是.我可以在Chrome(Canary)和Safari中复制结果.
我已经尝试了一些背面可见性的东西,它可以让它不会消失但是我可以用jQuery监听器点击它并将它翻转回前面.
这是小提琴:http: //jsfiddle.net/9gPfz/1/
这是CSS:`.equipment-card-holder {-webkit-perspective:1000; }
.equipment-card {身高:250px; 宽度:222px; 背景:#fff; box-shadow:0 1px 5px rgba(0,0,0,0.9); 向左飘浮; 保证金:0 9px 30px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.equipment-card .card-face{
-webkit-backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.equipment-card .card-front{
-webkit-transform: rotateY(0deg);
}
.equipment-card .card-back{
-webkit-transform: rotateY(180deg);
background-color: lightBlue;
}
.equipment-card.flipped{
-webkit-transform: rotateY(180deg);
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.span12{
width: 960px;
}
}`
Run Code Online (Sandbox Code Playgroud)
您将需要一个基于webkit的浏览器,用于我正在使用的供应商前缀.
我正在开发一个视差/滚动时间轴项目,并且我遇到了 CSS3 背景大小封面属性的问题。
div 具有以下属性:
background: url(../images/timeline/back-6.jpg) no-repeat top center black;
background-size: cover;
padding-top: 90px;
height: 1855px;
position: relative;
Run Code Online (Sandbox Code Playgroud)
使用 jQuery,我将后台附件切换为固定。当我这样做时,背景图像会“跳入”(这意味着超出屏幕边缘的图像部分现在可见)。这不是想要的结果。
在测试中,我可以将 div 切换为使用背景大小:100% 覆盖,但它在滚动时会导致不同的垂直跳跃问题。
当我将背景切换为固定时,有什么想法可以防止它跳出来吗?(当我将背景设置为滚动时,也会发生相反的情况)。
遗憾的是,我无法链接到此代码的演示,因为该页面尚未准备好部署。
我已经在谷歌上挖了一段时间,在这里堆栈Overflow并且找不到与此相关的任何内容.
我有多个输入文本字段,当模糊时调用jQuery AJAX函数到服务器.它几乎可以很好地工作.
问题是如果我专注于一个文本输入然后单击另一个(使其成为焦点).模糊事件不断被AJAX调用服务器和警报触发.
任何想法如何平静模糊,所以它不是经常开火?可能有一些非常简单的事情我不会这样做可能会解决这个问题.
这是代码(忽略{{}}和{%%}标记,这是一个django模板).
输入:
<td class="tracking-text">CK Req:</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.checkreq|default_if_none:" "}}" size="10"></td>
<td class="tracking-text">LPD:</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.lpd|default_if_none:""}}" size="10"></td>
<td class="tracking-text">PR#</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.prnumber|default_if_none:""}}" size="10"></td>
<td class="tracking-text">DATE:</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.prdate|default_if_none:""}}" size="10"></td>
Run Code Online (Sandbox Code Playgroud)
jQuery:
$('.tracking-input').blur(function(){
$.post( "{% url buy.views.update_purchase_ajax %}",
{pr_pk: $('span#pr_pk').html()},
function(data){
alert(data.message);
}, 'json');
});
Run Code Online (Sandbox Code Playgroud)
任何想法将不胜感激.