Replace the text with some animation using Jquery

Recently I'd got to know an awesome tip that would might be helpful for those who loves to create snippets and design templates.In this post I'm going to teach how to replace the first text with second one with some animation on a specific event.So lets check this demo.

If you have observed in above demo,the text instantly replaced with the link of that particular social site.Even the name (Hamza dhamiya) was not replaced but moving.This is easy to make,well you can see the Jquery script above but,for newbies take a look below.

`HTML`

<div class='socialheader'>
<div class='sociallinks'> <a href='mailto:hamza@bloggerever.com' class='email'>E-mail</a> / <a href='http://twitter.com/hamzadhamiya' class='twitter'>Twitter</a> / <a href='http://facebook.com/hamzadhamiya' class='facebook'>Facebook</a>
/ <a href='http://plus.google.com/u/0/101116903777663777708' class='googleplus'>Google</a>
</div>
<div class='socialspans'>
<span class='facebook hide'>facebook.com</span><span class='googleplus hide'>plus.google.com</span><span class='twitter hide'>@</span><span class='facebook googleplus hide'>/</span><span class='googleplus hide'>u/0/101116903777663777708</span><span class='fname email twitter facebook hide'>hamza</span><span class='twitter facebook hide lname'>dhamiya</span><span class='email hide'>@bloggerever.com</span>
</div>
</div>

If you will observe the above markup,there is no space or any special because if you will add the space,the links will not appropriate.Make sure that every span (the text) have class='hide' otherwise it will not hide when onload.

`CSS`

.sociallinks a {
color:#333;
font:300 13px sans-serif;
text-decoration:none;
}
.socialspans span.hide {
max-width: 0px !important;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
margin:0 0px;
}
.socialspans span {
display: inline-block;
overflow: hidden;
color:#333;
font:300 13px sans-serif;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
max-width: 200px;
}
.fname {
color:#ff8c77 !important;
}
.lname {
color:#ff8c77 !important;
}

Did you see that I've taken max-width instead of width? Well actually the problem was that the spans (that text) is not of a specific width,but in span.hide there should be width:0px while other span should have width:auto,which is not possible,because there will be no CSS transition between fixed value to auto value.To make it work I've used this simple tip.

In below Jquery the class='hide' will be added to other spans which are going to hide,while CSS transition will make them hide so lets have a look at Jquery with comments.

`Jquery`

//When the mouse will enter on the links,the event will be triggered
$('.sociallinks a').on('mouseenter', function () {
//className is the class of the current hovered linked
var className = $(this).attr('class');
//Every span which is going to replace
$('.socialspans span').each(function () {
//If it has a class of that link
if ($(this).hasClass(className)) {
//If any link of that class matches then remove class hide
$(this).removeClass('hide');
} else {
//Or add class hide
$(this).addClass('hide');
}
});
});
//When the mouse will be removed from outer wrap
//The the spans will go back
$('.socialheader').on('mouseleave', function () {
$('.socialspans span').each(function () {
$(this).addClass('hide');
});
});

If you want to ask any question,I will let you know the answer.