Question

I have multiple containers with links, like this:

<div class="items" id="first"><a href="item1">item 1</a></div>

The containers have a background image and the links are hidden with: display: none;

$(".items").mouseover(function() {
    $("a", this).show(1500);
}).mouseout(function() {
    $("a", this).hide(1500);
});

Live example

Now the problem is that the text is showing slow, but the place which occupies is taken immedeiatly. How to achieve the oposite – the text to be visible immediately and its place which it occupies to be shown slowly?

Answer 1

http://jsfiddle.net/wtZPQ/2/

you may also want to display:block to makesure the text doesnt wrap.