2

我的完整脚本正在运行，但是当我点击 div 时，div 会以相反的效果隐藏

这是我的代码

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

.BusyStyles
    {
        background-image: url('http://www.bba-reman.com/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;
filter:alpha(opacity=0.2);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}

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

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

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

                $('#transition').addClass("BusyStyles");
                setTimeout(function () {
                    $('#transition').animate({
                        top: (td.height() / 2) - 200/2,
                        left: (td.width() / 2) - 250/2,
                        width: 250,
                        height: 200
                    }, 600, function () {
                        //alert('pp');
                        // to do things   
                        $('#transition').removeClass("BusyStyles");
                        $('#transition').html('<b>Welcome...</b>');
                    });
                }, 3000);
            });

            $t.click(function (e) {
                //alert('pp');
                $(this).fadeOut('slow').remove();
            });
            return false;
        });


    });
</head>
<body>
<form id="form1" runat="server">
<a href="#" id='lnk' class="lnkcss">FeedBack</a>
</form>
</body>
</html>

我需要添加什么代码才能获得相反的效果。当我单击过渡 div 时，过渡 div 逐渐透明并缩小尺寸并移向反馈链接，最后隐藏。如果可能，请指导我。

这是我的代码链接。 http://jsfiddle.net/tridip/kPZrZ/2/

谢谢

4

0 回答 0