2

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

});
4

3 回答 3

2

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

现在您需要为文本添加一个跨度，您认为可以使用边距。

于 2013-07-09T15:52:03.697 回答
2

您可以只使用 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/

于 2013-07-09T16:00:03.700 回答
1

default正如 Edorka 所说，问题在于div上的填充。但是，您不需要更改 html 以使其正常工作。我在动画中添加了填充更改，这可以防止对内部跨度的需要，或者，如果您不希望填充动画，您可以简单地在悬停时更改它，这应该会提供更流畅的外观，就像现在一样动画期间文本移动了一点。

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

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

于 2013-07-09T16:00:09.370 回答