带jquery的动画文本切换

animated text switch with jquery

本文关键字：文本 动画 jquery      更新时间：2023-09-26

我正试图在这个页面的右侧实现这样的目标？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/

问题似乎在于填充：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;
 }

现在，您需要为具有您认为可以的边距的文本添加一个span。

正如Edorka所说，问题在于defaultdiv上的填充。然而，您不需要更改html的工作方式。我在动画中添加了填充更改，这样就不需要内部跨度，或者，如果你不想为填充设置动画，你可以简单地在悬停时更改它，这应该会让它看起来更流畅，因为现在文本在动画中移动了一点。

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

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

相关文章：