Trong thiết kế web, chúng ta có thể sử dụng jquery để tạo các hiệu ứng cho các đối tượng. Các hiệu ứng động của jQuery sẽ làm cho trang web của chúng ta thêm phần sinh động. Jquery cho phép bạn ẩn hiện, trượt lên trượt xuống các thành phần của trang web. Bạn cũng có thể cho nó xảy ra cùng một lúc hoặc theo thứ tự định trước.
Chẳng hạn như một số hiệu ứng:
Trong jquery đã hỗ trợ cho chúng ta các hiệu ứng giúp cho các đối tượng có thể ẩn, hiện một cách cực kỳ đơn giản.
<script> $(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); </script>
Trong đó:
<button>Nhấn để xem</button>
<p>Minh họa hoạt ảnh</p>
<script>
//mili giây
$("button").click(function(){
$("p").hide(1000);
});
// Ví dụ:
$("button").click(function(){
$("p").hide("slow");
});
// Ví dụ:
$("button").click(function(){
$("p").hide("fast");
});
// Ví dụ:
$("button").click(function(){
$("p").toggle();
});
</script>
Trong jquery đã hỗ trợ cho chúng ta các hiệu ứng giúp cho các đối tượng có thể fade in hay out một cách cực kỳ đơn giản.
<script> $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); </script>
Trong đó:
<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>
<script>
//mili giây
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
// Ví dụ:
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
// Ví dụ:
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
// Ví dụ:
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
</script>
Trong jquery đã hỗ trợ cho chúng ta các hiệu ứng giúp cho các đối tượng có thể slide down hay in một cách cực kỳ đơn giản.
<script> $(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback); </script>
Trong đó:
<div id="flip">Mời nhấn vào</div>
<div id="panel">Xuyên chào bạn!</div>
<script>
//Ví dụ:
$("#flip").click(function(){
$("#panel").slideDown();
});
// Ví dụ:
$("#flip").click(function(){
$("#panel").slideUp();
});
// Ví dụ:
$("#flip").click(function(){
$("#panel").slideToggle();
});
</script>
Trong jquery đã hỗ trợ cho chúng ta các hiệu ứng hoạt hình giúp cho các đối tượng có thể tạo hoạt hình một cách cực kỳ đơn giản.
<script>
$(selector).animate( {params}, speed, callback);
</script>
Trong đó:
<button>Nhấn để xem</button>
<p>Minh họa hoạt ảnh</p>
<div> style="
background:#98bf21;
height:100px;
width:100px;
position:absolute;">
</div>
<script>
//Ví dụ:
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
// Ví dụ:
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
// Ví dụ:
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
// Ví dụ:
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
// Ví dụ:
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
</script>
Trong jquery đã hỗ trợ cho chúng ta hàm callback để hỗ trợ khi chúng cần thực thi khi hiệu ứng áp đặt đã kết thúc.
<script> $(selector).funcName(speed,callback); </script>
Trong đó:
<button>Nhấn để xem</button>
<p>Minh họa hoạt ảnh</p>
<script>
//có callback:
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
// không callback:
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
</script>
Trích dẫn: (http://khonggiankythuat.com)
