fadeOut -> fadeIn doesn't work properly
<p>JS code:</p>

<pre><code>var forma = $('form#mali_oglas'),
    pomoc = $('div[role=pomoc]'),
    div = $('.mali_oglas_pomoc'),
    input = forma.find('input, textarea');   

    input.on('click', function(){
        var name = $(':input:focus').attr("name")
        pomoc.fadeOut('fast', function(){            
            div.find("[data-pomoc='" + name + "']").fadeIn('slow');            
            console.log(name);
        });
    });
</code></pre>

<p>HTML code:</p>

<pre><code>&lt;div class="mali_oglas_pomoc"&gt;
    &lt;div data-pomoc="name" role="pomoc"&gt;
        1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium, urna nec varius sollicitudin, erat urna accumsan sapien, vel interdum enim risus id mi. Class aptent taciti sociosqu ad litora.
    &lt;/div&gt;
    &lt;div data-pomoc="body" role="pomoc"&gt;
        2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium, urna nec varius sollicitudin, erat urna accumsan sapien, vel interdum enim risus id mi. Class aptent taciti sociosqu ad litora.
    &lt;/div&gt;.....    
&lt;/div&gt;
</code></pre>

<p>CSS for the div in question:</p>

<pre><code>div[role="pomoc"] {position: absolute; top: 45px; right: 0;width: 250px; display: none}
div[role="pomoc"]:first-child {display: block}
</code></pre>

<p>It is working, but a bit strange. First it is applying <strong>display block</strong> to the targeted div, then fading it out and fading in. What is going on?</p>

<p>Link:
<a href="http://jsfiddle.net/AY2B3/" rel="nofollow">http://jsfiddle.net/AY2B3/</a></p>
