Анимированный текстовый переключатель с jquery

Question

Я пытаюсь достичь чего-то подобного в правой части этой страницы? 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)  
    }) 

}); 

Answer 1

Вы можете сделать это только с 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 др двигаться в то же время ..

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

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

Answer 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; 
} 

Теперь вам нужно будет добавить span для текста с полями, которые вы считаете одобренными.

Answer 3

Как Edorka заявил, что проблема с отступами на default дел. Однако вам не нужно изменять html из того, как это сделать, чтобы это работало. Я добавил изменение дополнений к анимации, и это предотвращает необходимость внутреннего интервала, если вы не хотите, чтобы анимированные дополнения дополняли вас, вы могли бы просто изменить его при наведении, что должно дать более жидкий вид, видя, как сейчас текст немного перемещается во время анимации.

Все измененный код здесь:

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