jquery動畫文本切換

我想在這個頁面的右側實現這樣的事情嗎？ http://playground.deaxon.com/css/text-switch/jquery動畫文本切換

我到目前爲止沒有接近它的內容？它有很好的滑動效果。有人可以幫助我實現他們在上述網站中的內容嗎？

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

});

來源

2013-07-09 Athapali

你的鏈接頁面僅使用HTML和CSS來獲得的效果，你可以抓住他們的代碼，看看它是否適合你... – Tallmaris

你可以用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，使他們b同時OTH移動..

.animate({ 
      marginTop: -70  
     },100);

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

來源

2013-07-09 16:00:03

我喜歡第二個解決方案。我限於IE8，所以我不得不模仿css3過渡效果。謝謝你的幫助！ – Athapali

看來問題是補白：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-09 15:52:03 Edorka

由於Edorka陳述的問題是在default格的填充。但是，你不需要改變HTML的工作方式。我添加了對動畫的填充更改，並且這可以防止需要內部跨度，或者如果您不希望填充動畫，則可以在懸停時更改它，這應該使流動性更強，看起來像現在這樣文字在動畫中移動一點。

一切都改變了代碼是在這裏：

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

來源

2013-07-09 16:00:09 Don

jquery動畫文本切換

回答

相關問題