Untitled

jquery animation for OnBegin and Success is interrupted and not smooth at all anymore
function OnBeginStuff() {
            $("#StuffPanel").fadeTo("slow", 0.50);
        }
        function OnCompleteStuff() {
            $("#StuffPanel").fadeTo("slow", 1.00);
        }

        $(document).ready(function () {

            $('.mainLink', $('#NavigationPanel')).click(function (e) {
                e.preventDefault();
                $.ajax({
                    url: $(this).attr('href'),
                    beforeSend: OnBeginStuff,
                    complete: OnCompleteStuff,
                    success: function (html) {
                        $('#StuffPanel').html(html);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="NavigationPanel">
        @Html.ActionLink("1", "Index", "One", null, new { @class = "mainLink" })
        @Html.ActionLink("2", "Index", "Two", null, new { @class = "mainLink"  })
        @Html.ActionLink("3", "Index", "Three", null, new { @class = "mainLink" })
    </div>
    <div id="StuffPanel">
        @RenderBody()
    </div>
</body>
</html>

$('.mainLink').click(function (e) {
                e.preventDefault();
                $.ajax({
                    url: $(this).attr('href'),
                    beforeSend: OnBeginStuff,
                    complete: OnCompleteStuff,
                    success: function (html) {
                        $('#StuffPanel').html(html);
                    }
                });
            });