[英]windows 8 hover to slide effect using css and js
I think css3 alone can make it happen, I'm stuck because I still try to understand things like 'ease' in css3. 我认为仅靠css3就能实现它,我陷入困境是因为我仍然试图理解css3中的“ ease”之类的东西。
my progress so far http://jsfiddle.net/kwgy9/1/ 到目前为止我的进度http://jsfiddle.net/kwgy9/1/
the 'nike' should swipe to left, and 'just do it' appear slowly from right. “耐克”字样应向左滑动,而“只需这样做”则从右侧缓慢出现。 need help!
需要帮忙!
$("#box").mouseenter(function(){
}).mouseleave(function(){
});
Try this jsfiddle , I think it's what you want 试试这个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;
}
Edit: Sirikon's solution seems to be just fine. 编辑: Sirikon的解决方案似乎很好。 The way I did it might still be interesting for you, because of the way the floating elements in the
.row
are "pushed". 我的操作方式可能对您仍然很有趣,因为
.row
中的浮动元素是“推送”的。
I created a working Fiddle for you: 我为您创建了一个工作提琴:
http://jsfiddle.net/UJsR8/ http://jsfiddle.net/UJsR8/
It still needs some polish, yeah, but I think you'll get the idea playing around with it. 是的,它仍然需要一些修饰,但是我想您会想到的。 It is just one possible solution, mind you.
请注意,这只是一种可能的解决方案。
Hope this helps. 希望这可以帮助。 Cheers!
干杯!
The code: 编码:
HTML 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 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 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.