jQuery animate: 6 Demos với phần tử div, circle, text và UI – ví dụ hoạt ảnh jquery với mã

Bạn đang xem : ví dụ về hoạt ảnh jquery với mã

Phương thức hoạt ảnh của jQuery

Phương pháp tạo hoạt ảnh jQuery giúp tạo hoạt ảnh trong các trang web của bạn cho các phần tử khác nhau dễ dàng hơn. Về cơ bản, hoạt ảnh được tạo cho các thuộc tính CSS số bị hạn chế có thể được áp dụng cho các phần tử như div, đoạn văn, phần tử span, v.v.

Các hoạt ảnh được tạo có trọng lượng nhẹ và mượt mà, nếu không thì cần phải sử dụng các công cụ hoặc cách khác nhau nặng hơn cho các trang web. Vì vậy, nếu bạn đang sử dụng jQuery cho các chức năng khác, bạn không cần phải bao gồm bất kỳ tài nguyên nào khác để tạo hoạt ảnh và tình trạng quá tải có thể được giảm bớt, điều này cũng tốt cho SEO.

Phương thức animate jQuery yêu cầu một tham số là đối tượng CSS. Nó cũng có các thông số khác như thời lượng, tốc độ, v.v. là tùy chọn.

Cú pháp đơn giản của phương thức $ .animate

$ (bộ chọn) .animate ({css}, thời lượng, nới lỏng, hoàn thành);

Nơi bạn có thể sử dụng các bộ chọn khác nhau như phần tử HTML (div, đoạn, danh sách, v.v.), lớp, id, menu, v.v.

Trong hướng dẫn này, tôi sẽ trình bày cách bạn có thể sử dụng phương thức hoạt ảnh trong các phần tử đơn giản với các tham số khác nhau cũng như các tiện ích giao diện người dùng jQuery .

Một ví dụ đơn giản về hoạt ảnh

Trong ví dụ này, tôi sẽ tạo hiệu ứng cho một phần tử div được tạo kiểu bằng CSS. Mã này bao gồm các thư viện jQuery và jQuery UI vì tôi sẽ sử dụng các hiệu ứng cho hoạt ảnh. Khi bạn nhấp vào nút “Chạy hoạt ảnh”, vòng tròn là một phần tử div sẽ hoạt động với thời lượng 5 giây (5000 mili giây). Tôi đã sử dụng thuộc tính specialEasing trong đó tôi đã chỉ định các hiệu ứng cho chiều cao và chiều rộng.

Sau khi hoàn tất hoạt ảnh, một cảnh báo sẽ được hiển thị được đặt trong hàm hoàn thành của phương thức $ .animate . Hàm hoàn chỉnh thực thi sau khi hoàn thành hoạt ảnh.

jquery animate

Mã jQuery:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30 < / p>

31

32

33 < / p>

34

35

36

37

& lt; script & gt;

$ < / p>

(

tài liệu

)

.

đã sẵn sàng

(

hàm

(

)

{

< p class = "crayon-line" id = "crayon-62cdcc4e5226c840988204-5">

$

(

“# runani”

)

.

nhấp vào

(

chức năng

(

)

{

$

(

< p class = "crayon-s"> “# divanimation”

)

.

tạo hoạt ảnh

(

{

width

:

“chuyển đổi”

,

height

:

“chuyển đổi”

}

,

{

thời lượng < / p>

:

5000

,

specialEasing

:

{

width

:

“easyInOutSine”

,

height

:

“easyInOutSine”

,

}

,

hoàn thành

:

function

(

)

< p class = "crayon-h">

{

alert

(

” Hoạt ảnh đã hoàn thành! “

)

;

}

}

)

;

}

)

;

}

)

;

& lt; / script & gt;

Xem mã hoàn chỉnh, bao gồm CSS và đánh dấu trong trang demo.

Ví dụ về hoạt ảnh với tiện ích đàn accordion jQuery UI

Trong ví dụ này, tôi sẽ tạo một đàn accordion bằng cách sử dụng plugin jQuery accordion. Đàn accordion có ba tab. Sau đó, có một nút để mở và đóng đàn accordion với hình ảnh động. Khi bạn nhấn nút, đàn accordion sẽ được đóng lại bằng cách sử dụng phương thức hoạt ảnh jQuery. Sau khi hoàn thành hoạt ảnh, hãy nhấn nút một lần nữa để mở các tấm đàn accordion bằng hoạt ảnh.

Xem Thêm  Ký tự thay thế Python trong chuỗi - thay thế các ký tự trong chuỗi python

Trong hoạt ảnh, tôi lại sử dụng các hiệu ứng về chiều cao và chiều rộng của div chính. Tôi cũng đã sử dụng các thông số thời lượng hoàn thành của phương thức hoạt ảnh để chỉ định thời lượng hoạt ảnh sẽ được hoàn thành và để cho người dùng biết khi hoạt ảnh hoàn thành bằng cách hiển thị cảnh báo.

jquery animate accordion

Sau đây là mã được sử dụng cho hoạt ảnh trong & lt; script & gt; trong phần đầu:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30 < / p>

31

32

33 < / p>

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50 < / p>

51

52

53 < / p>

54

55

& lt; script & gt;

$ < / p>

(

tài liệu

)

.

đã sẵn sàng

(

hàm

(

)

{

< p class = "crayon-line" id = "crayon-62cdcc4e52276770900128-5">

$

(

< p class = "crayon-h">

“# runani”

)

.

nhấp vào

(

hàm

(

)

{

$

(

” # jQuery_accordion ”

)

.

tạo hoạt ảnh

(

{

chiều rộng

:

“300px”

,

chiều cao

:

“300px”

}

,

< / p>

{

thời lượng

:

< p class = "crayon-h">

3000

,

specialEasing

:

{

width

:

“easyInCubic”

,

chiều cao

:

“linear”

,

}

,

hoàn thành

:

function

(

)

{

alert

(

“Hoạt ảnh hoàn chỉnh!”

)

;

}

}

)

;

}

)

;

}

)

;

$

(

function

(

)

{

$

(

“# jQuery_accordion”

)

. < / p>

đàn accordion

(

{

< p class = "crayon-i"> có thể thu gọn

:

true

}

)

;

}

)

;

& lt; / script & gt;

Ví dụ về hoạt ảnh về văn bản và kích thước

Trong ví dụ này, kích thước của phần tử div cùng với kích thước văn bản sẽ được tăng lên bằng cách sử dụng phương thức animate của jQuery. Phần tử div được tạo với một vài thuộc tính CSS. Trong khi phương thức animate cũng sử dụng các thuộc tính CSS sẽ được thay đổi theo thời gian nhất định.

Lưu ý rằng, bạn có thể sử dụng nhiều thuộc tính CSS trong phương thức animate, tuy nhiên, bạn phải sử dụng tên thuộc tính theo camel-case.

Ví dụ: padding-right có thể được sử dụng làm paddingRight trong phương thức animate jQuery, v.v.

Một điều cần lưu ý khác là bạn có thể tạo hoạt ảnh cho màu sắc bằng cách sử dụng plugin Color animation. Đơn giản bằng cách sử dụng thư viện jQuery, màu của thư viện sẽ không được làm động, chẳng hạn như backgroundColor .

jquery animate text

Mã jQuery này cho ví dụ đó là:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

& lt; script & gt;

$ < / p>

(

“# start”

)

.

nhấp vào

(

function

(

)

{

< p class = "crayon-sy"> $

(

” # anim_div “

)

.

làm động

(

{

width

:

” 400px “

,

độ mờ

:

0,6

,

marginLeft

:

“40px”

,

paddingLeft

:

“30px”

,

fontSize

:

” 3em “

,

borderWidth

:

“3px”

,

borderRadius

:

“500px”

,

backgroundColor < / p>

:

“# 000”

}

,

3000

)

;

}

)

;

& lt; / script & gt;

Xem mã hoàn chỉnh trong trang demo.

Ví dụ chạy hai hoạt ảnh đồng thời

Trong ví dụ này về hoạt ảnh jQuery, tôi sẽ sử dụng phương thức hoạt ảnh để chạy hai hoạt ảnh cùng một lúc. Đối với điều đó, tôi có hai phần tử div với các kiểu khác nhau, phần tử nhỏ hơn nằm bên trong div lớn hơn.

Xem Thêm  Tải xuống tệp pdf bằng HTML - liên kết tải xuống html pdf

Khi bạn nhấn nút “Chạy hoạt ảnh”, các hoạt ảnh sẽ được bắt đầu bằng các hiệu ứng nhất định. Tôi đã sử dụng hai vòng lặp for trong ví dụ đó. Vòng lặp bên ngoài đầu tiên dành cho div mẹ sẽ chỉ chạy một lần, trong khi div bên trong, là một vòng tròn sẽ chạy năm lần trong khoảng thời gian đó.

Hãy xem bản trình diễn bằng cách nhấp vào liên kết hoặc hình ảnh bên dưới:

jquery animate đồng thời

Ví dụ về màu hoạt hình jQuery

Như đã đề cập trong phần trên, bạn có thể tạo hoạt ảnh cho màu sắc bằng cách sử dụng plugin màu. Nếu bạn đã bao gồm thư viện giao diện người dùng jQuery thì bạn đã hoàn tất. Tuy nhiên, nếu bạn chỉ cần sử dụng hoạt ảnh màu bằng cách sử dụng phương pháp hoạt ảnh jQuery thì bạn có thể xem xét chỉ tải xuống plugin bắt buộc thay vì thư viện đầy đủ. Để tùy chỉnh tải xuống của bạn, hãy truy cập liên kết này và chọn những gì bắt buộc: http://jqueryui.com/download/

Trong ví dụ này, tôi đã tạo một div có thuộc tính border-radius . Màu ban đầu được giữ là hơi vàng và khi bạn nhấp vào nút bắt đầu hoạt ảnh, nó sẽ chuyển sang màu xanh lục.

jquery animate color

Như bạn có thể thấy màu sắc đang thay đổi cùng với văn bản từ kích thước lớn hơn sang nhỏ hơn. Tôi đã sử dụng thuộc tính line-height để đẩy văn bản xuống một chút.

Ví dụ về hoạt ảnh liên tục

Cho đến nay, chúng tôi đã xem xét các hoạt ảnh khác nhau mà bạn bắt đầu bằng một nút và nếu nó được chuyển đổi, bạn có thể nhấn lại để lặp lại hoạt ảnh. Đôi khi bạn cần tiếp tục chạy hoạt ảnh liên tục. Bạn có thể xử lý điều đó theo lập trình trong jQuery theo nhiều cách khác nhau. Một trong những cách được hiển thị bên dưới trong bản trình diễn của phương pháp animate.

Trước tiên, hãy xem hoạt ảnh liên tục bằng cách nhấp vào liên kết hoặc hình ảnh bên dưới, sau đó mô tả một chút để tự làm ..

jquery animate continous

Vậy mã đang làm gì? Về cơ bản, tôi đặt tất cả mã của phương thức $ .animate trong một hàm tùy chỉnh animateex. Khi bạn nhấp vào nút “Chạy hoạt ảnh”, chức năng này được gọi. Khi hoạt ảnh được hoàn thành sau tham số thời lượng, tôi đã gọi một hàm animateback khác được cung cấp các thuộc tính CSS ban đầu bên trong phương thức hoạt ảnh jQuery.

Hàm này sẽ đưa div trở lại vị trí ban đầu và khi nó kết thúc, nó lại gọi hàm đầu tiên, animateex và quá trình này tiếp tục.


Xem thêm những thông tin liên quan đến chủ đề ví dụ hoạt ảnh jquery với mã

Tạo Slide Ảnh Giống Trang Shopee Với Jquery

alt

  • Tác giả: SUNTECH VIỆT NAM
  • Ngày đăng: 2020-09-18
  • Đánh giá: 4 ⭐ ( 8198 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tham gia cộng đồng học lập trình lớn nhất Việt Nam
    https://www.facebook.com/groups/hoclaptrinhmienphi.vn

    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
    Đăng ký kênh để nhận thông báo video mới nhất từ SUNTECH: https://goo.gl/1ZxwCS
    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
    Danh sách video khóa học lập trình Laravel tại SUNTECH
    https://www.youtube.com/watch?v=YV25kxBt2Sg&list=PLh5At4osX60LuzjTR3NWhAXiFGVRogFoe
    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
    hoclaptrinh javascript jquery
    – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
    Mọi chi tiết xin liên hệ:
    Name: Phạm Kỳ Khôi
    Email: daotaolaptrinhsuntech@gmail.com
    Phone: 0942 668 586
    Zalo: 0942 668 586
    Website: http://suntech.edu.vn
    Fan-page: https://www.facebook.com/suntech.edu.vn
    Group: https://www.facebook.com/groups/hoclaptrinhmienphi.vn

Hướng dẫn hoạt hình CSS3: Hướng dẫn, mã mẫu và ví dụ

  • Tác giả: www.webhostingsecretrevealed.net
  • Đánh giá: 4 ⭐ ( 1360 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm cách nào để tránh JS bằng cách sử dụng CSS Animations and Transitions? Chúng tôi sẽ giới thiệu một số ví dụ thú vị và thảo luận từ các bước rất cơ bản đến một số hiệu ứng tuyệt vời.

Tạo hoạt ảnh với các giá trị được xác định trước trong jQuery

  • Tác giả: hiepsiit.net
  • Đánh giá: 3 ⭐ ( 2199 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

jQuery Mobile

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 6290 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sự kiện trong jQuery, tìm hiểu Mouse event, Keyboard Event

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 2028 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: su kien trong jquery, Sự kiện trong jQuery, tìm hiểu Mouse event, Keyboard Event

jQuery Hide

  • Tác giả: book-code.com.vn
  • Đánh giá: 4 ⭐ ( 5101 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học HTML, Học CSS, Học Javascript, Học PHP, Học BOOTSTRAP, Học JQUERY. Tự học lập trình web, lập trình web cho người mới bắt đầu, học lập trình web online, học lập trình web online miễn phí, học code online, học lập trình cho người mới, học lập trình bắt đầu từ đâu. Học lập trình web online miễn phí 24/24, thành thạo các ngôn ngữ lập trình cơ bản trong thời gian ngắn, bookcode, codebook, book-code, code-book, code, book

Tạo hoạt ảnh bằng jQuery

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 3 ⭐ ( 8649 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: jQuery được xây dựng để tạo hoạt ảnh. Cho dù đó là làm mờ thông báo cảnh báo sau khi đăng nhập không thành công, trượt xuống điều khiển menu hoặc thậm chí bật

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  As Triage With Software Data Reduction Techniques - source code thuyet minh