Why doesn't my event fire the first time?
<pre><code>$(document).ready(function () {
    $('.raj').click(function () {
        if (!$(this).hasClass('already')) {

            $('.infos').html('');

            $('.infos').hide("fast");

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "ggg/hhh/rrr.php",
                success: function (msg) {
                    $('.infos').html(msg['ats']);
                    arr = msg['valid'];
                }
            });

            $('.infos').show("slow");

            if (arr == 1) {
                $(this).css("cursor", "default");
                $(this).addClass('already');
                $(this).animate({
                    opacity: 0.1
                }, 1000);
            }
        }
    })
})
</code></pre>

<p>When I click an element with class <code>raj</code> (it's an image), nothing happens. Only once it is clicked a second time does my event seem to fire. Why is this happening?</p>

<p><strong>edit:</strong>
this part is f*cked up:</p>

<pre><code>if(arr == 1)
{
    $(this).css("cursor", "default");
    $(this).addClass('already');
    $(this).animate({
        opacity: 0.1
    }, 1000);
}
</code></pre>

<p>But <code>msg['valid']</code> is really always 1, so I do not get it.</p>
