創建以特定方式動畫的通知彈出窗口？

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