如何将包含动态添加内容的HTML DIV滑入和滑出？

Question

在我的asp.net页面上，我并排有一个div和ASP.NET panel。 加载页面时显示面板，并且在加载时div为空。当用户单击可见面板上的链接/按钮时，我在空div中填充相关内容（该内容始终是只读的），并使用“幻灯片插入”效果（在JQuery UI中）使该div出现。先前可见的面板会滑出。

“关闭”按钮是动态添加的内容的一部分。 现在，当我单击关闭按钮时，我希望动态内容（即开头为div的空白）“滑出”，而我的asp.net面板再次希望“滑入”。 / strong>我正在努力实现这一部分。

我能够使动态内容消失的唯一方法是在JavaScript中使用clearDynamicContents方法中的第一行。如果我对此行发表评论，我将开始收到确认弹出窗口（在Chrome中），询问我是否要离开该页面。

1. 为什么我在页面上没有编辑任何内容时会弹出该弹出窗口？
2. 关闭动态内容时，是否有更好的方法使可见内容滑出和动态内容滑入。反之亦然？

我的HTML和javascript的相关部分如下所示。 （请注意，我不想删除表单级别的onbeforeunload事件侦听器。我只是不想让我的页面在关闭我的动态内容（始终为只读）时显示确认弹出窗口。 ）

<div id="mainContentDiv">
	<div id="dynamicallyPopulatedDiv">
		
	</div>
	<asp:Panel ID="mainPanel" runat="server" EnableViewState="False" style="display: none;height: 100%;" />
</div>

可以帮助我实现这一目标的javascript如下：

// dynamicHtmlMarkup is generated in the code behind.
function renderDynamicContents(dynamicHtmlMarkup) {
	$("[id$='mainPanel']").toggle("slide", { direction: 'left' }, "slow");
	$("#dynamicallyPopulatedDiv").html(dynamicHtmlMarkup).hide();
	$("#dynamicallyPopulatedDiv").toggle("slide", { direction: 'right' }, "slow");
}

function clearDynamicContents() {
	// If I remove this line, I start getting confirmation popup which I dont want. 
	$("#dynamicallyPopulatedDiv").html("");
	$("[id$='mainPanel']").toggle("slide", { direction: 'left' }, "slow", this.setScrollbar);
	$("#dynamicallyPopulatedDiv").toggle("slide", { direction: 'right' }, "slow");
}