jquery怎麼讓一個div慢慢向右展開

2019-12-12 16:13:27

jquery實現讓一個div慢慢向右展開，可以使用jquery中的animate()方法，讓div的寬度由0向設定的寬度擴大，從而實現效果。下面介紹實現的過程。

新建一個html檔案，命名為test.html ，用於實現讓div向右邊慢慢展開的效果。

在test.html頁面的head頭部，載入jquery.min.js檔案，成功載入該檔案才能使用animate()方法。

在test.html頁面，建立一個div模組，並且設定它的class屬性為pp，用於樣式布局和下面獲得該div物件進行操作。

使用css對上面的div進行樣式布局，設定div的初始寬度為0px，高度為50px，背景顏色為黃色。

在script標籤內，使用$(document).ready()方法實現在頁面載入時就執行一個function方法，用於實現慢慢展開的效果。

在function函數內，獲得div物件，使用animate()進行動畫效果設定，使其寬度慢慢擴充套件為300px ，這個效果設定為6秒內完成。

在瀏覽器開啟test.html檔案，檢視實現的效果，可以見到，div從無到有，慢慢向右展開，直至寬度為300px時停止擴充套件。