Slide in text when icon is hovered

Question

I've been trying to get an effect where:

1. Icon Font is shown, text beside it is hidden.
2. when hover on an icon, slide in the text that is hidden. Slide in from the right.

Here is what I've tried so far:

(Since it will take to much time, replaced icons with some random keyboard symbols) http://jsfiddle.net/h9EX9/

ul li { display: inline-block; list-style-type: none; margin-right: 10px; background: #eee; }
ul li span { display: inline-block; }
ul li a { display: inline-block; width: 0; height: 0; overflow: hidden;  }
ul li:hover a  { transition: all 1s ease-out; width: 100%; height: auto; }

This is the effect I'm trying to accomplish. Text and and width of comment slides from the right. But there are other icons besides this one. I hope its also possible to slide those when the width of the background expands.

So is this possible, if so how?

Answer 1

Here's your demo with some work done on the CSS. It's a little long winded but gets the job done without JavaScript using only CSS transitions for animation. For some reason it animated better using max-width instead of width but I'm not sure why.

Demo: http://jsfiddle.net/Marcel/h9EX9/1/

When implementing properly, you might want to use an extra wrapper element to animate instead of the <a> as you will have multiple <a> elements in the "tags" button for example.

Answer 2

You can do this by using the jQuery hover() function here's some demo code :

<script type="text/javascript">
$(".icon").hover(function(){ $(".text").show("slide", { direction: "left" }, 1000);}, function(){ $(".text").show("slide", { direction: "right" }, 1000);});
</script>

of course you must as you've mentioned set .text's display to none and don't forget to include the jQuery script in the head section of your HTML

ps: you can replace .icon and .text by any other CSS selector to select your icon or text example ul li a so $(".icon").hover will become $("ul li a").hover