Thứ Sáu, 7 tháng 3, 2014
jQuery Fade
«Trở lại
Chương tiếp theo »
Phương pháp jQuery Fading
Với jQuery bạn có thể mờ dần một yếu tố trong và ngoài tầm nhìn.
jQuery có phương pháp phai sau:
- fadeIn ()
- fadeOut ()
- fadeToggle ()
- fadeTo ()
jQuery fadeIn () Phương pháp
Phương pháp jQuery fadeIn () được sử dụng để phai trong một yếu tố tiềm ẩn.
Cú pháp:
$(selector).fadeIn(speed,callback);
Các thông số tốc độ tùy chọn xác định thời gian hiệu lực. Nó có thể mất các giá trị sau: "chậm", "nhanh", hoặc mili giây.
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi chạy xong mờ dần.
Ví dụ sau đây cho thấy các fadeIn () phương pháp với các thông số khác nhau:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
Thử nó cho mình »
jQuery fadeOut () Phương pháp
Phương pháp jQuery fadeOut () được sử dụng làm mờ một yếu tố có thể nhìn thấy.
Cú pháp:
$(selector).fadeOut(speed,callback);
Các thông số tốc độ tùy chọn xác định thời gian hiệu lực. Nó có thể mất các giá trị sau: "chậm", "nhanh", hoặc mili giây.
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi chạy xong mờ dần.
Ví dụ sau đây cho thấy các fadeOut () phương pháp với các thông số khác nhau:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
Thử nó cho mình »
jQuery fadeToggle () Phương pháp
Phương pháp jQuery fadeToggle () Toggles giữa fadeOut () phương pháp fadeIn () và.
Nếu các yếu tố được nhạt nhòa dần, fadeToggle () sẽ mờ dần họ nhập
Nếu các yếu tố được phai mờ trong, fadeToggle () sẽ mờ dần chúng ra.
Cú pháp:
$(selector).fadeToggle(speed,callback);
Các thông số tốc độ tùy chọn xác định thời gian hiệu lực. Nó có thể mất các giá trị sau: "chậm", "nhanh", hoặc mili giây.
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi chạy xong mờ dần.
Ví dụ dưới đây trình bày fadeToggle () phương pháp với các thông số khác nhau:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
Thử nó cho mình »
jQuery fadeTo () Phương pháp
Phương pháp jQuery fadeTo () cho phép mờ dần đến một độ mờ nhất định (giá trị giữa 0 và 1).
Cú pháp:
$(selector).fadeTo(speed,opacity,callback);
Các thông số tốc độ yêu cầu xác định thời gian hiệu lực. Nó có thể mất các giá trị sau: "chậm", "nhanh", hoặc mili giây.
Các thông số Opacity yêu cầu trong fadeTo () phương pháp quy định cụ thể mờ dần đến một độ mờ nhất định (giá trị giữa 0 và 1).
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi hoàn thành chức năng.
Ví dụ dưới đây trình bày fadeTo () phương pháp với các thông số khác nhau:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeTo() with different parameters.</p>
<button>Click to fade boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
Thử nó cho mình »
«Trở lại
Chương tiếp theo »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét