005_滑动效果
1. jQuery滑動方法
1.1. 通過jQuery, 您可以在元素上創建滑動效果。
1.2. jQuery擁有以下滑動方法: slideDown()、slideUp()和slideToggle()。
2. slideDown()方法
2.1. slideDown()方法通過使用滑動效果, 顯示隱藏的被選元素。
2.2. 語法:
$(selector).slideDown(speed,callback);2.3. 參數
2.4. 如果元素已經是完全可見, 則該效果不產生任何變化, 除非規定callback函數。
2.5. 該效果適用于通過jQuery隱藏的元素, 或在CSS中聲明display:none的元素(但不適用于visibility:hidden的元素)。
3. slideUp()方法
3.1. 通過使用滑動效果, 隱藏被選元素, 如果元素已顯示出來的話。
3.2. 語法:
$(selector).slideUp(speed,callback);3.3. 參數
3.4. 如果元素已經隱藏, 則該效果不產生任何變化, 除非規定了callback函數。
4. slideToggle()方法
4.1. slideToggle()方法通過使用滑動效果(高度變化)來切換元素的可見狀態。如果被選元素是可見的, 則隱藏這些元素, 如果被選元素是隱藏的, 則顯示這些元素。
4.2. 語法:
$(selector).slideToggle(speed,callback);4.3. 參數
5. 例子
5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>jQuery滑動效果</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("p").slideUp('fast');});$('#btn2').click(function(){$("p").slideDown('fast');});$('#btn3').click(function(){$("p").slideToggle('fast');});$('#btn4').click(function(){$("p").slideUp('slow');});$('#btn5').click(function(){$("p").slideDown('slow');});$('#btn6').click(function(){$("p").slideToggle('slow');});$('#btn7').click(function(){$("p").slideUp('normal');});$('#btn8').click(function(){$("p").slideDown('normal');});$('#btn9').click(function(){$("p").slideToggle('normal');});$('#btn10').click(function(){$("p").slideUp(2000);});$('#btn11').click(function(){$("p").slideDown(2000);});$('#btn12').click(function(){$("p").slideToggle(2000);});});</script></head><body><button id="btn1">fast向上滑動段落</button> <button id="btn2">fast向下滑動段落</button> <button id="btn3">fast向上滑動/向下滑動段落</button><br /><br /><button id="btn4">slow向上滑動段落</button> <button id="btn5">slow向下滑動段落</button> <button id="btn6">slow向上滑動/向下滑動段落</button><br /><br /><button id="btn7">normal向上滑動段落</button> <button id="btn8">normal向下滑動段落</button> <button id="btn9">normal向上滑動/向下滑動段落</button><br /><br /><button id="btn10">2s向上滑動段落</button> <button id="btn11">2s向下滑動段落</button> <button id="btn12">2s向上滑動/向下滑動段落</button><p style="width: 300px; height: 300px; background: red;">jQuery向上滑動和向下滑動</p></body> </html>5.2. 效果圖
總結
- 上一篇： 004_淡入淡出效果
- 下一篇： 006_动画