Javascript 是否以特定方式创建动画通知弹出窗口？

我将如何为我的表单提交制作以下动画

（我想我不需要输入它，而是创建一个可视化的界面。）

---

我会使用jQuery。以下是我将采取的步骤：

编写要开始的基本HTML代码，包括必要的和字段

为项目已保存通知创建空div<代码>项目已保存并将默认样式设置为

显示：无

添加JavaScript进行表单验证，以确保输入符合预期

在保存代码的表单中，我希望您将使用。在成功回调中，调用对#item_saved进行更改的函数。最初，更改元素的可见性并应用一个类，该类在第二个图像中为元素提供初始位置

使用jQuery函数。您需要让它更改位置和尺寸。jqueryui扩展了animate函数以提供额外的功能：查看

---

更新：编辑以提供更多信息并更直接地解决问题。

我使用JSFIDLE为您提供了一个概念证明：

（动画现在重置，单击“提交”按钮）

您需要仔细查看CSS，但需要注意的是

元素的位置设置为相对，消息元素的位置设置为绝对。这是为了确保消息元素的位置始终相对于表单元素

HTML

<form><div id="message"></div>
    <input> Label 1<br/><br/>
    <input> Label 2<br/><br>
    <textarea>Larger text area</textarea><br/><br/>
    <textarea>And another</textarea><br/><br/>
    <button type="button">Submit</button>
</form>​

JavaScript

$("button").click(function () {
    var msg = $("#message");
    msg[0].style.cssText = "";
    msg.text("Item saved!");
    msg.fadeIn('slow').animate({
        "bottom": "3px",
        "height": "17px",
        "font-size": "1em",
        "left": "80px",
        "line-height": "17px",
        "width": "100px"
    });
});​

---

这是安迪的想法，通过水平居中进行了改进

HTML:

​

定心功能：

(function($) {
$.fn.extend({
    center: function() {
        return this.each(function() {
            var left = ($(window).width() - $(this).outerWidth()) / 2;
            $(this).css({
                position: 'absolute',
                margin: 0,
                left: (left > 0 ? left : 0) + 'px'
            });
        });
    }
});})(jQuery);

$("button").click(function() {
var msg = $("#message");
msg.text("Item saved!")
msg.hide()
msg.stop(true, true).fadeIn('slow').animate({
    "bottom": "4px",
    "height": "17px",
    "font-size": "1em",
    "left": "80px",
    "line-height": "17px",
    "width": "100px"
}).delay(2000).fadeOut('slow').css({
    "height": "100px",
    "width": "200px",
    "font-size": "1.4em",
    "line-height": "100px",
    "bottom": "100px"
}).center();});​

呼叫中心：

$("#message").center();

单击功能：

(function($) {
$.fn.extend({
    center: function() {
        return this.each(function() {
            var left = ($(window).width() - $(this).outerWidth()) / 2;
            $(this).css({
                position: 'absolute',
                margin: 0,
                left: (left > 0 ? left : 0) + 'px'
            });
        });
    }
});})(jQuery);

$("button").click(function() {
var msg = $("#message");
msg.text("Item saved!")
msg.hide()
msg.stop(true, true).fadeIn('slow').animate({
    "bottom": "4px",
    "height": "17px",
    "font-size": "1em",
    "left": "80px",
    "line-height": "17px",
    "width": "100px"
}).delay(2000).fadeOut('slow').css({
    "height": "100px",
    "width": "200px",
    "font-size": "1.4em",
    "line-height": "100px",
    "bottom": "100px"
}).center();});​

---

这是一个很好的开始，不过，我希望在弹出通知时将其集中在vieport的中心。目前，考虑到查看端口的位置，您对其进行了绝对不真实的定位。。虽然把它放在视野中心可能有点过分了。为了概念的证明，但更重要的是为了这个我从未听说过的方便的网站。你能在这里发布一些代码吗？很好的例子。@Roeland:这肯定会让事情变得更复杂，但这仍然是可能的。您需要确定项目的确切位置-例如，获取“提交”按钮的偏移位置，并将其声明为最终动画的“最终位置+左侧x像素”属性。最新的一款可以水平和垂直居中。此外，它还计算出被单击按钮的位置，以便动画适当地跟随按钮。

$("button").click(function() {
var msg = $("#message");
msg.text("Item saved!")
msg.hide()
msg.stop(true, true).fadeIn('slow').animate({
    "bottom": "4px",
    "height": "17px",
    "font-size": "1em",
    "left": "80px",
    "line-height": "17px",
    "width": "100px"
}).delay(2000).fadeOut('slow').css({
    "height": "100px",
    "width": "200px",
    "font-size": "1.4em",
    "line-height": "100px",
    "bottom": "100px"
}).center();});​