Showing DIV with custom effect using jquery
<p>my full script is running but when i click on div then div is not getting hide but i have written code to hide it....can any one tell me where i made the mistake.</p>

<p>here is my code</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style type="text/css"&gt;
.lnkcss 
{
    margin-left:350px;
}

.BusyStyles
    {
        background-image: url('images/ajax-loader.gif');
        background-repeat: no-repeat; background-position: center center; 
    }

 #transition {

display:none;
position:absolute; top:50%; left:50%; z-index:50;
border:1px solid #666;
width:100px; height:100px;
}

&lt;/style&gt;
&lt;script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        $('#lnk').click(function (e) {
            $('body').append('&lt;div id="transition"&gt;&lt;/div&gt;').show();

            var $t = $('#transition'),
            to = $(this).offset(),
            td = $(document);

            //$t.children('div').css({ width: 100, height: 100 });
            $t.css({
                top: to.top + 50,
                left: to.left + 50,
                display: 'block'
            }).animate({
                top: td.height() / 2,
                left: td.width() / 2
            }, 600, function () {
                $(this).animate({
                    top: '-=75',
                    left: '-=50'
                }, 600);

                $(this).animate({
                    width: 250,
                    height: 200
                }, 600, function () {
                    $('#transition').addClass("BusyStyles");

                });
            });
            return false;
        });

        $('#transition').click(function (e) {
            alert('pp');
            $(this).hide();
        });
    });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="form1" runat="server"&gt;
&lt;a href="#" id='lnk' class="lnkcss"&gt;FeedBack&lt;/a&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

$('#transition').click(function (e) {
            alert('pp');
            $(this).hide();
        });
</code></pre>

<p>the above line i wrote to hide div but it is nothing happen when i click on div.</p>
