# Day 21 不只阿嬤會動！元素也會動！（下）

yo
我們在上一章提到了 JQuery ，並且用他來簡化程式碼（嘿對沒錯就是修改標題那個）這一章我們
要來使用 JQuery 來讓元素動起來。

## 利用 jQuery 創建一個元素

在讓元素動起來之前，我們要先讓元素出場阿，不然要怎麼讓元素動起來？？讓空氣動起來嗎？？？
拉回正題，我們除了用 DOM 創建元素，也可以用 jQuery 創建元素的喔！若想使用 jQuery 的話
，需要調用 jQuery 對象的 append 方法，參數是包含 HTML 的一個字符串。append 方法把這個
字符串轉換成 DOM 元素，並且把這個新元素添加到最初的元素末尾。那要怎麼寫呢？看我操作：

$('body').append('<p>附加項目</p>');

`※後面分號可加不加`

這樣你就擁有了一個附加標題了！選擇器字符串不一定是 ID。 程式碼`＄('body')`選擇了`body`元素
。同樣也可以使用程式碼`$('p')`選中所有的 P 元素。
輸出如下：


我們也可以使用`append`來添加新的小標題，例如：

    for (var i = 0; i < 1; i++) {
      var 嗚嗚 = prompt('給副標題取標題吧！');
      $('body').append('<pig>' + 嗚嗚 + '</pig>');
    }

輸出如下：


是不是很神奇？

## 讓元素動起來

我們經常會看到一些網站，他上面有的字會動，或是淡出淡入等...太多了。
那這樣的效果要怎樣做呢？只須簡單的一句程式碼：

$('h1').fadeOut(3000);

是的只須一句程式碼，就可以讓主標題實現淡出淡入的夢想，肯定有人問：「我要的是有動作不是淡出淡入」等等我還沒表演完呢，急啥？看我表演：

$('h1').slideUp(3000).fadeOut(3000);

這句程式碼就可以向上擦除文字，同時也能達到淡出的效果，很 cool 齁？

## 小總結

透過這一章的講解相信大家對 jQuery 多了更多了解，也可以使用它來玩簡易動畫！下一章我們會深入 HTML，請敬請期待！！