Ẩn hiện button trong Javascript

Let's use images link!

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

jQuery có một số hiệu ứng động rất dễ để sử dụng. Trong đó, phương thức hide() và show() đùng để ẩn đi hay hiện thị các phần tử chọn, tương tự toggle() sẽ tương đương với show() nếu phần tử đang ẩn, và tương đương với hide() nếu phần tử đang hiện thị.

Bấm vào đây
    Sử dụng toggle()

Phương thức show(), hide(), toggle() có thể chứa tham số thứ nhất để chỉ ra thời gian hoàn thành hiệu ứng (tính bằng mili giây).

Ví dụ hiệu ứng sảy ra trong 1s

Bấm vào đây
    Sử dụng toggle(1000)

Phương thức show(), hide(), toggle() còn có thể chứa hàm callback, là hàm sẽ thi hành sau khi hiệu ứng hoàn thành.

Ví dụ sau sẽ gọi một hàm callback sau khi hieu ứng hoàn thành thành.

Bấm vào đây
    Sử dụng toggle(1000)

Hiệu ứng mờ dần

Tương tự như ba hàm show(), hide(), toggle() cũng có ba hàm với chức năng tương tự nhưng đi kèm hiệu ứng phai dần đó là fadeIn(), fadeOut() và fadeToggle()

Tương tự nó cũng có thể có hai tham số tốc độ và ham callback, ví dụ:

Bấm vào đây
    Sử dụng fadeToggle(1000)

Ngoài ra còn có phương thức fadeTo(speed, opacity) để chạy hiệu ứng thiết lập opacity về giá trị chỉ ra. Ví dụ:

$("div").fadeTo(1500, 0.7);

Hiệu ứng trượt phần tử

Hiệu ứng xuất ẩn phần tử slideUp, xuất hiện phần tử slideDown là hiệu ứng giống với hide(), show() nhưng kèm thêm trượt phần tử. Tương tự có slideToggle() để chuyển trạng thái qua lại giữa hai phương thức này

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách hiện và ẩn một phần tử HTML.

Bấm vào đây để HIỆN phần tử bên dưới

Bấm vào đây để ẨN phần tử bên dưới

Cách hiện và ẩn một phần tử HTML

Phương thức show() dùng để hiện một phần tử HTML

Phương thức hide() dùng để ẩn một phần tử HTML

$(selector).show();
$(selector).hide();

Khi người dùng click vào nút hiện thì phần tử có id là div2 sẽ được hiện lên

Khi người dùng click vào nút ẩn thì phần tử có id là div2 sẽ bị ẩn đi

$("input[value='hien']").click(function(){
    $("#div2").show();
})
$("input[value='an']").click(function(){
    $("#div2").hide();
})

Ngoài ra, chúng ta cũng có thể:

• Thiết lập thời gian của việc thực thi hiện/ẩn phần tử.
• Thiết lập một hành động nào đó sau khi việc hiện/ẩn phần tử đã được hoàn thành.

$(selector).show(time, callback);
$(selector).hide(time, callback);

Trong đó:

• Tham số time là khoảng thời gian của việc thực thi hiện/ẩn phần tử. Giá trị của tham số time có thể là:
• "slow" khoảng thời gian tương đối dài.
• "fast" khoảng thời gian tương đối ngắn.
• milliseconds (Ví dụ: 3000, 9000). Lưu ý: 1000 milliseconds = 1 giây
• Tham số callback là một hàm sẽ được thực thi sau khi việc hiện/ẩn phần tử đã được hoàn thành.

HIỆN/ẨN phần tử chỉ sử dụng tham số time

$("input[value='radio1']").click(function(){
    $("#abc").show("slow");
})
$("input[value='radio2']").click(function(){
    $("#abc").hide("slow");
})

HIỆN/ẨN phần tử chỉ sử dụng tham số callback

$("input[value='radio1']").click(function(){
    $("#abc").show(function(){alert("HIỆN");});
})
$("input[value='radio2']").click(function(){
    $("#abc").hide(function(){alert("ẨN");});
})

HIỆN/ẨN phần tử chỉ sử dụng tham số time & callback

$("input[value='radio1']").click(function(){
    $("#abc").show("slow", function(){alert("HIỆN");});
})
$("input[value='radio2']").click(function(){
    $("#abc").hide("slow", function(){alert("ẨN");});
})

HIỆN/ẨN phần tử bằng phương thức toggle()

Phương thức toggle() dùng để thực hiện luân phiên việc hiện và ẩn phần tử HTML.

Ví dụ:

• Khi phần tử đang bị ẩn, phương thức toggle() sẽ hiện phần tử lên.
• Khi phần tử đang hiện, phương thức toggle() sẽ ẩn phần tử đi.

Cách sử dụng tham số "time" và "callback" giống như trong phương thức hide() và show()

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

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

$("button").click(function(){
    $("#abc").toggle(2000);
})

Chỉ sử dụng tham số callback

$("button").click(function(){
    $("#abc").toggle(function(){alert("XONG");});
})

Sử dụng tham số time và callback

$("input[value='hien']").click(function(){
    $("#div2").show();
})
$("input[value='an']").click(function(){
    $("#div2").hide();
})