CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Athapali
Athapali

Reputation: 1089

animated text switch with jquery

I am trying to achieve something like this on the right side of this page? http://playground.deaxon.com/css/text-switch/

What i have so far is no where close to what its in there? it has that nice slide effect. Can someone help me achieve what they have in the above site?

What i have so far: 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)    
    })

});

Upvotes: 2

Views: 533

Answers (3)

Don
Don

Reputation: 4157

As Edorka stated the problem is with the padding on the default div. However you don't need to change the html from how it is to get this to work. I added padding change to the animation and this prevents the need for an inner span, alternately if you don't want the padding animated you could simply have it change on hover, that should give a more fluid look seeing as how it is now the text moves a bit during the animation.

All changed code is here:

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

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

You can do it with just CSS (using CSS Transitions).

(you also have to take into consideration the fact that paddings get added to the width/height, so the container needs to be bigger)

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

}

Demo at http://jsfiddle.net/9WwQ9/16/

If you have to use jQuery for the animations, then animate the margin-top so that they both move at the same time..

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

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

Upvotes: 2

Edorka
Edorka

Reputation: 1811

Seems that the problem are the paddings: http://jsfiddle.net/2MEka/

I removed them: 

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

Now you would need to add a span for the text with the margins you consider ok.

Upvotes: 2

Related Questions