我正在尝试在此页面的右侧实现类似的功能吗?
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/

09-10 00:52
查看更多