javascript - 创建以特定方式动画的通知弹出窗口？

Question

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

(我想与其打字，不如创建一个视觉效果。)

Answer 1

我已经使用 jsFiddle 为您整理了一个概念证明:

http://jsfiddle.net/kAhXd/1/ (animation now resets, click the submit button)

您需要仔细查看 CSS，但需要注意的重要事项是 <form>元素的位置设置为相对，消息元素的位置设置为绝对。这是为了确保消息元素的位置始终相对于表单元素。

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

CSS

form { position:relative; width:500px; }
#message { 
    position:absolute;
    display:none;
    height:100px;
    width:200px;
    border: 1px gray solid;
    background-color:lime;
    font-size: 1.4em;
    line-height:100px;
    text-align:center;
    left: 150px;
    bottom:100px; 
    border-radius: 5px;
}    ​

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"
    });
});​