将jquery动画转换为CSS3
Convert jquery animation to CSS3
HTML:
<div id="slick-slidetoggle">wxyz</div>
<div id="slickbox" >abcd</div>
JS-
//DOM准备好后立即隐藏切片盒(页面加载稍早(
var hoverVariable=false;
var hoverVariable2=false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2=true;
$('#slickbox').slideToggle(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2=false;
hoverVariable=true;
})
CSS
#slickbox {
background: black;
width:100px;
height: 135px;
display: none;
cursor:pointer;
color:white;
}
#slick-slidetoggle{
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
现在,上面的功能是我想要使用纯CSS实现的,也就是说,当我将鼠标悬停在"wxyz"按钮上时,"abcd"按钮应该下降并保持可见,即使鼠标从"wxyz"移开3秒。
我尝试了display属性的转换延迟,但显然这在display属性上不起作用,然后我尝试了position:absolute&可见性&能见度的转换延迟,但按钮的出现延迟了3秒,而不是隐藏。我希望"abcd"按钮在仅使用CSS或CSS3 将按钮从"wxyz"移开3秒后隐藏
这是示例(此处编码(
(我只写了-webkit
,但你可以添加其他前缀(
#test2 {
position:absolute;
z-index:1;
background: black;
width:100px;
height: 135px;
opacity: 0;
cursor:pointer;
color:white;
opacity:0;
-webkit-animation-duration: 600ms;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
}
#test {
position:absolute;
z-index:2;
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
.container {
position:relative;
}
.container:hover #test2 {
opacity:1;
-webkit-animation-name: slideDown;
}
.container:not(:hover) > #test2 {
-webkit-animation-delay:1000ms;
-webkit-animation-name: slideUp;
opacity:1;
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(135px);
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(135px);
}
100% {
-webkit-transform: translateY(0);
}
}
这里有一个跨浏览器的解决方案:
在OPERA
-SAFARI
-CHROME
-MAXTHON
-FIREFOX
上测试
HTML:
<div class="container">
<div id="test">wxyz</div>
<div id="test2" >abcd</div>
</div>
CSS:
#test {
width:100px;
height:100px;
background:yellow;
position:relative;
z-index:2;
}
#test2 {
top:-100px;
width:100px;
height:100px;
background:black;
color:white;
position:relative;
z-index:1;
}
.container:hover #test2 {
top:0px;
transition-property:top;
transition-duration:0.2s;
transition-timing-function: linear;
/* Firefox 4 */
-moz-transition-property:top;
-moz-transition-duration:0.2s;
-moz-transition-timing-function:linear;
/* Safari and Chrome */
-webkit-transition-property:top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
/* Opera */
-o-transition-property:top;
-o-transition-duration:0.2s;
-o-transition-timing-function:linear;
/* IE */
-ms-transition-property:top;
-ms-transition-duration:0.2s;
-ms-transition-timing-function:linear;
}
.container:not(:hover) #test2 {
top:-100px;
transition-property:top;
transition-duration:0.2s;
transition-timing-function: linear;
transition-delay: 3s;
/* Firefox 4 */
-moz-transition-property:top;
-moz-transition-duration:0.2s;
-moz-transition-timing-function:linear;
-moz-transition-delay:3s;
/* Safari and Chrome */
-webkit-transition-property:top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:3s;
/* Opera */
-o-transition-property:top;
-o-transition-duration:0.2s;
-o-transition-timing-function:linear;
-o-transition-delay:3s;
/* IE */
-ms-transition-property:top;
-ms-transition-duration:0.2s;
-ms-transition-timing-function:linear;
-ms-transition-delay:3s;
}
Fiddle:http://jsfiddle.net/BerkerYuceer/2gVLX/
使用转换如下所示:
<head>
<style>
#outer {
width: 100px;
height: 50px;
background-color: green;
position: relative;
}
#innerOne {
width: 100px;
height: 50px;
background-color: blue;
}
#innerTwo {
width: 100px;
height: 50px;
background-color: red;
position: absolute;
top: -150px;
left: 100px;
}
#outer:hover #innerTwo {
top: 0px;
-webkit-transition: top 2s ease-out;
-moz-transition: top 2s ease-out;
-o-transition: top 2s ease-out;
transition: top 2s ease-out;
}
#innerTwo:not(hover) {
-webkit-transition: top 1s ease-in 3s;
-moz-transition: top 1s ease-in 3s;
-o-transition: top 1s ease-in 3s;
transition: top 1s ease-in 3s;
}
</style>
</head>
<body>
<div id="outer">
<div id="innerOne">wxyz</div>
<div id="innerTwo">abcd</div>
</div>
</body>
</html>
相关文章:
- css3转换和javascript出错
- CSS3转换导致非常奇怪的window.scrollY行为
- CSS3转换和javascript交互
- 如何使用CSS3转换
- 更改CSS3转换值
- 添加CSS3转换浮动导航栏-JQUERY
- 添加CSS3转换展开/折叠
- 滚动条不可见,CSS3转换在MOZ中不起作用
- CSS3转换+jQuery翻转卡问题
- 类似css3转换的Javascript
- 如何在 jquery transit 中暂停和重新启动 css3 转换
- 使用 Javascript 的 CSS3 转换
- 为什么这个 CSS3 转换没有被触发
- CSS3 转换 - 如何延迟 z 索引属性的重置
- 在*最后一个*CSS3转换之后,事件处理的稳健方式
- 如何在IE中访问css3转换旋转
- 是否可以在Javascript中的css3转换期间获得目标css属性值
- 如何使用属性显示带有CSS3转换的隐藏元素
- 用户查看页面后启动CSS3转换
- 使用点击jquery事件执行css3转换