Question

我想在本页的右侧实现类似的功能吗？ http://playground.deaxon.com/css/text-switch/

到目前为止，我所拥有的是什么？它具有漂亮的幻灯片效果。有人可以帮助我实现他们在上述网站上所拥有的东西吗？

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)    
    })

});

Answer 1

似乎问题是填充：http://jsfiddle.net/2MEka/

我删除了它们：

.up-down {
    overflow:hidden;
    height:60px;
    width:220px;    
    font-weight: bold;  
}
.slide {
    width:220px;
    height:60px;
}
.default {
    background-color:#0b61a4;
    color:#fff;
}
.onhover {
    background-color:#00aeef;
    height: 60px;
    color:#fff; font-size: 14px;
 }

现在您需要为文本添加一个带有您认为合适的边距的范围。

Answer 2

您只需使用CSS（使用CSS Transitions ）即可。

（你还必须考虑到填充物被添加到宽度/高度的事实，因此容器需要更大）

.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/

Answer 3

正如Edorka所述，问题在于default div上的填充。但是，您不需要更改html以使其工作。我添加了填充更改到动画，这可以防止需要内部跨度，或者如果你不想要填充动画，你可以简单地让它在悬停时改变，这应该给出一个更流畅的外观，看它现在是怎样的文字在动画中移动了一点。

所有更改的代码都在这里：

http://jsfiddle.net/9WwQ9/15/

用jquery动画文本切换

3 个答案: