Hiệu ứng Bounce trong jQuery
Miêu tả
Hiệu ứng Bounce có thể được sử dụng với phương thức effect(). Nó Bounce phần tử theo chiều dọc hoặc chiều ngang n lần.
Cú pháp
Sau đây là cú pháp để sử dụng hiệu ứng Bounce trong jQuery:
selector.effect( "bounce", {arguments}, speed );
Tham số
Chi tiết tham số được sử dụng để tạo hiệu ứng Bounce trong jQuery:
direction − Phương hướng của hiệu ứng, có thể là "up", "down", "left", "right". Mặc định là "up".
distance − Khoảng cách để bounce. Mặc định là 20
mode: Chế độ của hiệu ứng, có thể là "show", "hide" hoặc "effect". Mặc định là "effect".
times − Thời gian để bounce. Mặc định là 5.
Ví dụ
Sau đây là ví dụ đơn giản minh họa cách sử dụng của hiệu ứng Bounce trong jQuery:
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#button").click(function(){
$(".target").effect( "bounce", {times:3}, 300 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click the button</p>
<button id="button"> Bounce </button>
<div class="target">
</div>
</body>
</html>
Nó sẽ cho kết quả:
Công cụ giáo viên (2048.VN)
Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free
Các bài học jQuery khác tại VietJack:
Dành cho bạn
Công cụ giáo viên
- Tạo đề online từ PDF / Word
- Trộn nhiều mã đề, in Offline
- Giao bài online, Quản lí lớp học
