Forum

Home » jQuery giới thiệu » xem chi tiết

1
Hình đại diện
ongnoiteo

Bài thứ 5 - Hiệu ứng jQuery - Ẩn và Hiển thị

Đăng lúc: 14:42:50 26/04/2017
jQuery hide() and show()

Dùng jQuery, chúng ta có thể ẩn và hiện 1 phần tử HTML với các phương thức hide() và show():

Ví dụ:
+ Ẩn nội dung thẻ p
$("#hide").click(function(){
$("p").hide();
});
+ Hiện nội dung thẻ P
$("#show").click(function(){
$("p").show();
});

Cú pháp:

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

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

+ Tham số speed là tùy chọn nó xác định tốc độ ẩn hiên (hiding/showing) và nó có thể nhận các giá trị sau: "slow", "fast", hay sô mili giây.

+ Tham số callbackcũng là tùy chọn nó là tên function sẽ thực thi sau khi thực thi hoàn thành hide() hay show() (chúng ta sẽ nghiên cứu callback functions ở phần sau)
Hình đại diện
ongnoiteo
Đăng lúc: 15:40:22 28/04/2017
Cú pháp:

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

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

+ Tham số speed là tùy chọn nó xác định tốc độ ẩn hiên (hiding/showing) và nó có thể nhận các giá trị sau: "slow", "fast", hay sô mili giây.

+ Tham số callbackcũng là tùy chọn nó là tên function sẽ thực thi sau khi thực thi hoàn thành hide() hay show() (chúng ta sẽ nghiên cứu callback functions ở phần sau)

ví dụ: ẩn sau 1000 mili giây

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>

<button>Hide</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>
Hình đại diện
ongnoiteo
Đăng lúc: 14:15:51 03/05/2017
Bài thứ 5 - Hiệu ứng jQuery - Ẩn và Hiển thị (tiếp theo)

jQuery toggle()
- Với jQuery, Chúng ta có thể thay đổi qua lại hiệu ứng khi gọi phướng thức hide() và show() bằng toggle(). Đây là một phướng thức khá thú vị:

* Chúng ta hãy xem phần tử html ẩn hiện khi gọi phướng thức toggle()
ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>

<button>Toggle between hiding and showing the paragraphs</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>


Cú pháp:

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

- Tương tự tham biến speed là tùy chọn và có thể nhận các giá trị: "slow", "fast", hay mili giây.

- Tham biến callback cũng là tùy chọn và là tên của hàm, và nó sẽ được gọi sau khi toggle() đã thực thi xong.


* Phương thức animate() thực hiện một hoạt ảnh tùy chỉnh của một tập các thuộc tính CSS. Phương pháp này sẽ thay đổi một phần tử từ trạng thái này sang trạng thái khác bằng CSS. Giá trị thuộc tính CSS được thay đổi từ từ, để tạo hiệu ứng hoạt hình.

* Chỉ các giá trị số có thể được hoạt hình (như "margin: 30px"). Giá trị String không được hoạt hình (như "background-color:red"), ngoại trừ chuỗi "show", "hide" và "toggle".
ví dụ:

$("button").click(function(){
$("#box").animate({height: "300px"});
});
Hình đại diện
sony
Đăng lúc: 14:31:57 17/05/2017
clearQueue()
* Hủy tất cả các phương thức chưa thực hiện còn trong hàng đợi đối với các phần tử đã chọn.

Ví dụ:
- Dừng hoạt hình ngay lập tức khi nó trình diễn chưa hêt.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height: 300}, 1500);
$("div").animate({width: 300}, 1500);
$("div").animate({height: 100}, 1500);
$("div").animate({width: 100}, 1500);
});
$("#stop").click(function(){
$("div").clearQueue();
});
});
</script>
</head>
<body>

<button id="start">Start Animation</button>
<button id="stop">Stop Animation</button>
<br><br>

<div style="background:red;height:100px;width:100px;"></div>

</body>
</html>



* Định nghĩa và cách sử dụng

-Phương thức clearQueue () hủy bỏ tất cả các phương thức chưa chạy khỏi hàng đợi. Lưu ý rằng khi một phương thức đã bắt đầu chạy và đang chạy dở, nó sẽ vẫn tiếp tục chạy cho đến khi nó được hoàn thành bất chấp lúc đó gọi Phương thức này.

* Các phương thức liên quan:

- Queue () : Hiển thị các phương thức đang đợi
Dequeue () : Hủy bỏ các phương thức tiếp theo từ hàng đợi

Lưu ý: Không giống như phương thức stop () chỉ hoạt động với hoạt hình, phương thức clearQueue() có thể hủy bỏ bất kỳ chức năng nào trong hàng đợi.

*Cú pháp:

$(selector).clearQueue(queueName)

- selector tham biến là phần tử html chọn
- queueName tham biến là tùy chọn chỉ rõ tên hàng đợi mặc định "fx", đây là tên hàng đợi hiệu ứng tiêu chuẩn


----------------------

-Sở thích:
+ Ngắm hoa quỳnh nở
+ Mua sắm đồ sale off các kiểu
+ Ăn vặt
Hình đại diện
sony
Đăng lúc: 15:05:32 17/05/2017
Phương thức fadeIn()

* Định nghĩa và cách sử dụng
- Phương thức fadeIn() Hiệu ứng thay đổi dần dần từ ẩn đến mờ đến nhìn thấy (hiệu ứng mờ).
- Lưu ý: Các yếu tố ẩn sẽ không được hiển thị không chiếm chổ (không còn ảnh hưởng đến bố cục của trang nữa).

Mẹo: Phương pháp này thường được sử dụng cùng với phương thức fadeOut ().

* Cú pháp
$(selector).fadeIn(speed,easing,callback)

-speed là tùy chọn chỉ rõ tốc độ là mili giây. Mặc định là 400 milli giây
=> giá trị có thể nhận là: số milli giây,"slow", "fast"
- easing là tùy chọn chỉ rõ tốc độ hoạt cảnh trong thời điểm khác nhau. Mạc định là "swing"
=> giá trị có thể nhận:
+"swing" - di chuyển chậm ở đầu và cuối haotj cảnh nhưng nhanh ở giửa
+"linear" - di chuyển tuyến tính với tốc độ không đổi
+ Ngoài ra nó còn ảnh hưởng do các external plugins của trình duyệt

- callback là tùy chọn tên hàm sẽ được gọi sau khi fadeIn() đã hoàn thành

Ví dụ với tốc độ hoạt hình:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(1000);
});
$(".btn2").click(function(){
$("p").fadeIn(1000);
});
});
</script>
</head>
<body>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

<p>This is a paragraph.</p>

</body>
</html>
Ví dụ dùng callback

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(1000, function(){
alert("fadeOut() method is finished!");
});
});
$(".btn2").click(function(){
$("p").fadeIn(1000, function(){
alert("fadeIn() method is finished!");
});
});
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

</body>
</html>

----------------------

-Sở thích:
+ Ngắm hoa quỳnh nở
+ Mua sắm đồ sale off các kiểu
+ Ăn vặt
Hình đại diện
sony
Đăng lúc: 08:16:16 26/05/2017
jQuery dequeue()
*Định nghĩa và cách sử dụng
- Phương thức dequeue() loại bỏ các function sẽ chạy tiếp theo từ queue, và sau đó thực hiện các chức năng mà phương thức này chỉ định.

- Queue là thuật ngữ chỉ là có một hoặc nhiều function đang sếp hàng chờ đến lượt để chạy.

- Phương thức dequeue() được sử dụng cùng với phương thức queue().

- Một phần tử HTML có thể có nhiều hàng đợi. Thường nó có một, hàng đợi "fx", là hàng đợi jQuery mặc định.

* Lưu ý: Bạn nên đảm bảo rằng phương thức dequeue() được gọi sau khi thêm một function với queue(), để cho phép tiến trình tiếp tục.

*Cú pháp
- $(Selector) .dequeue (queueName)


+QueueName Tùy chọn. Chỉ định tên của queue, Mặc định là "fx", đây là queu hiệu ứng tiêu chuẩn
Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var div = $("div");
$("#start").click(function(){
div.animate({height: 300}, "slow");
div.animate({width: 300}, "slow");
div.queue(function () {
div.css("background-color", "red");
div.dequeue();
});
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow");
});
$("#stop").click(function(){
div.clearQueue();
});
});
</script>
</head>
<body>

<p>The queue() method shows the queue of functions to be executed on the selected elements.</p>
<p>The dequeue() method removes the next function from the queue, and then executes the function.</p>
<p>The clearQueue() removes all items from the queue that have not yet been run.<p>

<p>
<button id="start">Start Animation</button>
<button id="stop">Stop Animation</button>
</p>

<div style="background:#98bf21;height:100px;width:100px;position:relative"></div>

</body>
</html>


----------------------
(Sưu tầm và biên soạn)
-Sở thích:
+ Ngắm hoa quỳnh nở
+ Mua sắm đồ sale off các kiểu
+ Ăn vặt
Hình đại diện
sony
Đăng lúc: 08:29:26 26/05/2017
Phương thức fadeOut()

Định nghĩa và cách sử dụng

* Phương thức fadeOut() làm mờ dần đến khi mất hẳn, cho các phần tử đã chọn (hiệu ứng mờ).

*Lưu ý: Các phần tử sẽ mờ và ẩn nhưng vẫn chiếm chổ trên trang (không còn ảnh hưởng đến bố cục của trang nữa).

*Mẹo: Phương pháp này thường được sử dụng cùng với phương thức fadeIn() là phương thức làm hiệu ứng từng ẩn-sáng dần-sáng rõ.

*Cú pháp
-$(selector).fadeOut(speed,easing,callback)

+ speed tùy chọn. Chỉ định tốc độ của hiệu ứng mờ. Giá trị mặc định là 400 mili giây

Các giá trị có thể: milliseconds,"slow","fast"
+ easing Tùy chọn. Chỉ định tốc độ hiệu ứng của phần tử trong các thời điểm khác nhau của hoạt ảnh. Giá trị mặc định là "swing"
Các giá trị có thể:

+"Swing" - di chuyển chậm hơn ở đầu / kết thúc, nhưng nhanh hơn ở giữa
+"linear" - di chuyển với tốc độ không đổi

Mẹo: Nhiều chức năng easing có sẵn trong các plugin ngoài trình duyệt

+ Callback Tùy chọn. Một hàm sẽ được thực hiện sau khi phương thức fadeOut () hoàn tất
*Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(1000);
});
$(".btn2").click(function(){
$("p").fadeIn(1000);
});
});
</script>
</head>
<body>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

<p>This is a paragraph.</p>

</body>
</html>

----------------------
(Sưu tầm và biên soạn)
-Sở thích:
+ Ngắm hoa quỳnh nở
+ Mua sắm đồ sale off các kiểu
+ Ăn vặt
Hình đại diện
sony
Đăng lúc: 08:40:55 26/05/2017
Phương thức hiệu ứng fadeTo()

* Định nghĩa và cách sử dụng
-Phương thức fadeTo() từ sáng làm mờ dần dần, các phần tử đã chọn, cho đến độ mờ xác định.

*Cú pháp
-$(selector).fadeTo(speed,opacity,easing,callback)


+ speed Chỉ định tốc độ của hiệu ứng mờ.
Các giá trị có thể: milliseconds,"slow","fast"

+ opacity Chỉ định độ mờ đến đây là dừng. Phải là một số từ 0,00 đến 1,00
+ easing Tùy chọn. Chỉ định tốc độ của phần tử trong các thời điểm khác nhau của hoạt ảnh. Giá trị mặc định là "swing"
+Các giá trị có thể:

"Swing" - di chuyển chậm hơn ở đầu / kết thúc, nhưng nhanh hơn ở giữa
"linear" - di chuyển với tốc độ không đổi

*Mẹo: Nhiều chức năng nới lỏng có sẵn trong các plugin ngoài
*Callback Tùy chọn. Một hàm được thực hiện sau khi phương thức fadeTo () hoàn tất

* ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").fadeTo(2000, 0.2, function(){
alert("The fadeTo effect is finished!");
});
});
});
</script>
</head>
<body>

<button>Gradually change the opacity of the p element</button>

<p>This is a paragraph.</p>

</body>
</html>

----------------------
(Sưu tầm và biên soạn)
-Sở thích:
+ Ngắm hoa quỳnh nở
+ Mua sắm đồ sale off các kiểu
+ Ăn vặt
699: truy cập - Anynomus: online trang này.
1






VTNSolution ™ là một hệ thống mở, thành viên tự chịu trách nhiệm về nội dung đăng tải do mình đưa lên. Các phần mềm, logo, hình ảnh, thương hiệu... có bản quyền thuộc về chủ nhân sở hữu. Truy cập, sử dụng website này bạn phải chấp nhận Quy định của Diễn đàn
Powered by: VTNSOLUTION Copyright © 2007 - 2020
Thiết kế bởi Cty Giải pháp công nghệ VTN.
Website đang hoạt động thử nghiệm. Chờ giấy phép MXH/TTDT của Bộ TT&TT.
Lên đầu trang
Xuống cuối trang