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

Question

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

（我想，而不是键入它，我会创造一个视觉。）

Answer 1

这里的安迪的想法提炼与地平线对中。

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> 

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; 
    border-radius: 5px; 
    bottom: 100px;} 

定心功能：

(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); 

呼叫中心：

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

点击功能：

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

http://jsfiddle.net/2qJfF/

Answer 2

我会使用jQuery。下面是我想借此解决这个步骤：

1. 代码的基本HTML上手包括必要的<form>和<input>领域。
2. 为物品保存通知创建一个空格。 <div id="item_saved">Item Saved!</div>并且具有默认样式display:none。
3. 添加JavaScript执行表单验证以确保输入具有您期望的内容。
4. 在表格保存代码中，我希望你会使用Ajax。在成功回调中，调用一个修改#item_saved的函数。最初，改变元素的可见性并应用一个类，让它在第二个图像中处于初始位置。
5. 使用jQuery animate函数。你会想让它改变位置和尺寸。 jQuery UI扩展了动画功能以提供附加功能：请看animate demos。

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

Answer 3

我扔在一起的概念对你的证明，使用的jsfiddle：

http://jsfiddle.net/kAhXd/1/（动画现在重置，点击提交按钮）

你需要采取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" 
    }); 
});​