我正在尝试在此页面的右侧实现类似的功能吗?
http://playground.deaxon.com/css/text-switch/
到目前为止,我所能得到的与那里所没有的接近?它具有很好的滑动效果。
有人可以帮助我实现上述网站中的功能吗?
我到目前为止所拥有的:
http://jsfiddle.net/9WwQ9/
jQuery(document).ready(function(){
jQuery('.up-down').mouseover(function(){
jQuery('.default').stop().animate({
height: 0
}, 60);
}).mouseout(function(){
jQuery('.default').stop().animate({
height: 60
}, 60)
})
});
最佳答案
您可以仅使用CSS(使用CSS转换)来完成此操作。
(您还必须考虑到填充物被添加到宽度/高度的事实,因此容器需要更大)
.up-down {
overflow:hidden;
height:70px;
width:130px;
font-weight: bold;
}
.up-down > div {
width:120px;
height:60px;
padding:5px;
color:#fff;
transition:margin 0.3s;
}
.default {
background-color:#0b61a4;
}
.onhover {
background-color:#00aeef;
font-size: 14px;
}
.up-down:hover .default{
margin-top:-70px;
}
http://jsfiddle.net/9WwQ9/16/上的演示
如果具有以便将jQuery用于动画,则可以对
margin-top
进行动画处理,以便它们可以同时移动。.animate({
marginTop: -70
},100);
http://jsfiddle.net/9WwQ9/23/