1

由于我做了更改：将 asp.net mvc ajax actionlink 重写为 jquery/ajax 语句 ，当我单击这三个链接之一时，以下代码不再提供平滑的淡入/淡出动画：为什么会这样？ 

        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>
4

1 回答 1

1

您是否有任何理由同时使用#NavigationPanel和.mainLink来绑定点击功能。
试试这个

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

或者，如果您需要同时使用两个选择器，则将此行添加到 click 事件处理程序 e.stopPropagation();，e.preventDefault();这样事件的冒泡将停止，并且只会发送一次调用ajaxandOnBeginStuff和OnCompleteStuff。

于 2012-05-01T09:56:59.233 回答