我有一个非常具体的技巧，我正在尝试在 JavaScript 中执行，我确信那里有库可以让我做到这一点，但到目前为止，我对精确解决方案的搜索失败了。
我有一个网页，在屏幕的右上角有一个“登录”按钮。当用户单击按钮时，我将在屏幕中央显示一个 CSS 模式对话框，允许用户输入他们的身份验证信息。CSS 对话框已全部设置好，只缺少一件：
我想在用户单击登录按钮时添加一个动画，该按钮显示从登录按钮“打开”到屏幕中心的模式框，以帮助将用户的眼睛吸引到下一个应该去的地方。动画应该感觉类似于将窗口最小化到/从 Windows 任务栏最小化。
谁能给我指出一个具有此功能的 JavaScript 库？非常感谢！
我想我刚刚在 jQueryUI 中找到了我想要的东西：
有一种“转移”效果，可以将框轮廓从一个元素移动到另一个元素。虽然这不会显示模态对话框本身从按钮扩展，但它应该实现将用户的眼睛从 A 点吸引到 B 点的目标。不过，我很想听听其他解决方案！
jQueryUI 传输演示： http: //jqueryui.com/demos/effect/default.html（将选择框从“盲”更改为“传输”，然后单击“运行效果”。）
jQueryUI 传输描述： http ://docs.jquery.com/UI/Effects/Transfer
这是我的尝试：-p http://jsfiddle.net/zAzqB/
利用 jQuery 和jQuery Easing库（只是为了使效果更平滑……可以省略 easing 库，它仍然可以正常工作）。在动画发生时克隆应该动画的元素，并将原始元素移动到动画到最终位置的剪辑元素中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.clickBrn { height:50px; width:100%; text-align:right;}
.popUp {height:100px; width:500px; margin:auto; background:#333; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; line-height:100px; margin-top:100px;}
</style>
<script type="text/javascript" src="javascript/jquery-1.6.2.js"></script>
<script type="text/javascript" src="javascript/jquery.min.js"></script>
</head>
<body>
<div class="clickBrn">
<input type="button" name="btn" id="btn" value="Click" />
</div>
<div id="iAM" class="popUp"> </div>
<script>
$("#iAM").hide();
$("#btn").click(function()
{
//document.getElementById('iAM').style.marginLeft="400px";
$("#iAM").css( { marginLeft : "400px" } );
$("#iAM").show(1000);
});
</script>
</body>
</html>
我最近使用了 JQuery Mobile SimpleDialog2 并且对它非常满意。我确实注意到动画适用于 chrome，但不适用于 FF。