[英]windows 8 hover to slide effect using css and js
我认为仅靠css3就能实现它,我陷入困境是因为我仍然试图理解css3中的“ ease”之类的东西。
到目前为止我的进度http://jsfiddle.net/kwgy9/1/
“耐克”字样应向左滑动,而“只需这样做”则从右侧缓慢出现。 需要帮忙!
$("#box").mouseenter(function(){
}).mouseleave(function(){
});
试试这个jsfiddle ,我想这就是你想要的
body {
font-family:'Fenix', serif;
text-decoration:none;
font-size:24px;
font-weight:bold;
}
#box {
width: 160px;
height: 60px;
background: orange;
text-align:center;
border:2px solid orange;
border-radius:5px;
cursor:pointer;
display: inline-block;
overflow:hidden;
position:relative;
transition: all 1s ease;
}
#box:hover {
color:orange;
background:#FFF;
}
#box:hover > p {
left:-160px;
}
#box > p{
color:white;
transition: all 1s ease;
position:absolute;
top:0px;
left:0px;
font-size:24px;
line-height:60px;
display:inline-block;
margin:0px;
padding:0px;
width:160px;
}
#box > span{
white-space:no-wrap;
position:absolute;
top:0px;
left:160px;
display:inline-block;
transition: all 1s ease;
width:160px;
font-size:24px;
line-height:60px;
}
#box:hover>span{
color:orange;
left:0px;
}
编辑: Sirikon的解决方案似乎很好。 我的操作方式可能对您仍然很有趣,因为.row
中的浮动元素是“推送”的。
我为您创建了一个工作提琴:
是的,它仍然需要一些修饰,但是我想您会想到的。 请注意,这只是一种可能的解决方案。
希望这可以帮助。 干杯!
编码:
HTML
<div class="slide-box">
<div class="row">
<div class="col left">NIKE</div>
<div class="col right">JUST DO IT</div>
</div>
</div>
CSS
body {
font-family:'Fenix', serif;
text-decoration:none;
font-size:24px;
font-weight:bold;
}
.slide-box{
width:300px;
height:100px;
background:orange;
border:2px solid orange;
border-radius:5px;
cursor:pointer;
overflow:hidden; /* comment this for a visualization of how it works */
}
.slide-box:hover {
color:orange;
background:#FFF;
}
.row{
width:600px;
height:100px;
}
.col{
width:200px;
height:50px;
padding:25px 50px;
text-align:center;
float:left;
overflow:hidden;
}
JS
$(document).ready(function() {
var leftWidth,
leftPaddingX;
leftWidth = $('.left').width();
leftWidth = leftWidth + 'px';
leftPaddingX = $('.left').css('padding-left');
$('.slide-box').mouseover(function(){
$('.left').animate({
width: '0px',
paddingLeft: '0px',
paddingRight: '0px'
}, 300);
}).mouseleave(function(){
$('.left').animate({
width: leftWidth,
paddingLeft: leftPaddingX,
paddingRight: leftPaddingX
}, 300);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.