jQuery hiệu ứng

Trang trước
Trang tiếp theo

jQuery có thể tạo ra các hiệu ứng ẩn, hiển thị, chuyển đổi, trượt và动画 tùy chỉnh.

Thử ngay

Vui lòng thử hiệu ứng jQuery này:

CodeW3C.com - Trang web dẫn đầu về bài học công nghệ Web

Tại CodeW3C.com, bạn có thể tìm thấy tất cả các bài học về xây dựng trang web mà bạn cần.

Vui lòng nhấp vào đây

Mô hình

jQuery hide(): Hiển thị hàm hide() đơn giản của jQuery.
jQuery hide(): Một演示 hide() khác. Cách ẩn một phần văn bản.
jQuery slideToggle(): Hiển thị hiệu ứng slide panel đơn giản.
jQuery fadeTo(): Hiển thị hàm fadeTo() đơn giản của jQuery.
jQuery animate(): Hiển thị hàm animate() đơn giản của jQuery.

jQuery ẩn và hiển thị

Bằng cách sử dụng hai hàm hide() và show(), jQuery hỗ trợ ẩn và hiển thị các yếu tố HTML:

Mô hình

$$("#hide").click(function(){
$$("p").hide();
});
$$("#show").click(function(){
$$("p").show();
});

Thử ngay

Cả hàm hide() và show() đều có hai tham số tùy chọn: speed và callback.

Cú pháp:

$$(selector).hide(speed,callback)
$$(selector).show(speed,callback)

speed Tham số quy định tốc độ hiển thị hoặc ẩn. Bạn có thể thiết lập các giá trị sau: "slow", "fast", "normal" hoặc miligia.

callback Tham số là tên hàm sẽ được thực hiện sau khi hàm hide hoặc show hoàn thành. Bạn sẽ học thêm về điều này trong các chương sau của giáo trình. callback Kiến thức về tham số.

Mô hình

$("button").click(function(){
$$("p").hide(1000);
});

Thử ngay

jQuery chuyển đổi

Hàm toggle() của jQuery sử dụng hàm show() hoặc hide() để chuyển đổi trạng thái hiển thị của yếu tố HTML.

Ẩn hoặc hiển thị các yếu tố hiển thị, hiển thị hoặc ẩn các yếu tố ẩn.

Cú pháp:

$$(selector).toggle(speed,callback)

speed Tham số có thể thiết lập các giá trị sau: "slow", "fast", "normal" hoặc miliseconds.

Mô hình

$("button").click(function(){
$$("p").toggle();
});

Thử ngay

callback Tham số là tên của hàm sẽ được thực thi sau khi hàm này hoàn thành. Bạn sẽ học thêm về các thông tin liên quan trong các chương tiếp theo của giáo trình này. callback Kiến thức về tham số.

Hàm cuộn jQuery - slideDown, slideUp, slideToggle

jQuery có các hàm cuộn sau:

$$(selector).slideDown(speed,callback)
$$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

speed Tham số có thể thiết lập các giá trị sau: "slow", "fast", "normal" hoặc miliseconds.

Mô hình slideDown()

$(".flip").click(function(){
$(".panel").slideDown();
});

Thử ngay

Mô hình slideUp()

$(".flip").click(function(){
$(".panel").slideUp();
})

Thử ngay

Mô hình slideToggle()

$(".flip").click(function(){
$(".panel").slideToggle();
});

Thử ngay

jQuery Hàm Fade - fadeIn(), fadeOut(), fadeTo()

jQuery có các hàm fade sau:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed Tham số có thể thiết lập các giá trị sau: "slow", "fast", "normal" hoặc miliseconds.

Trong hàm fadeTo() opacity Tham số quy định giảm độ mờ đến độ mờ cho trước.

Mô hình fadeTo()

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

Thử ngay

Mô hình fadeOut()

$("button").click(function(){
$("div").fadeOut(4000);
});

Thử ngay

jQuery Animation Tùy chỉnh

Cú pháp của hàm jQuery tạo animation tùy chỉnh:

$(selector).animate({params},[duration],[easing],[callback])

Tham số quan trọng là paramsNó định nghĩa các thuộc tính CSS tạo ra animation. Có thể thiết lập nhiều thuộc tính này cùng một lúc:

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

Tham số thứ hai là durationNó định nghĩa thời gian áp dụng cho animation. Giá trị được thiết lập là: "slow", "fast", "normal" hoặc miliseconds.

Mẫu 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

Thử ngay

Mẫu 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

Thử ngay

Mục tiêu HTML mặc định là định vị tĩnh và không thể di chuyển.

Để cho phép phần tử có thể di chuyển, hãy đặt CSS position thành relative hoặc absolute.