標籤：cursor border
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">*{margin:0;padding:0;}body {font-size:13px;line-height: 130%;padding: 60px;}#panel{width: 300px;border: 1px solid #0050D0;}.head{padding: 5px;background: #96E555;cursor: pointer;}.content{padding: 10px;text-indent: 2em;border-top: 1px solid #0050D0;display: block;display: none;}.highlight{background: #FF3300}</style><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript">/*$(function() {//show() hide() 方法中傳入毫秒數達到動畫效果$(".head").toggle(function(){$(".content").show(500);},function(){$(".content").hide(500);});})*///只改變高度/*$(function() {$(".head").toggle(function(){$(".content").slideDown(500);},function(){$(".content").slideUp(500);});})*///只改變透明度/*$(function() {$(".head").toggle(function(){$(".content").fadeIn(500);},function(){$(".content").fadeOut(500);});})*///toggle()可以切換元素是否可見//slideToggle通過高度變化來切換匹配元素的可見度//fadeToggle通過透明度來切換可見度//fadeTo把透明度以漸進的方式調整為執行的值（0-1之間）$(function() {$(".content").show(500);var i = 1;$(".head").click(function(){//$(".content").toggle(500);//$(".content").slideToggle();//$(".content").fadeToggle(1000);$(".content").fadeTo("slow", i);i = i - 0.1;});})//</script></head><body><div id="panel"><h5 class="head">什麼是JQuery？</h5><div class="content">JQuery是一個JavaScript庫。</div></div> </body></html>
本文出自 “阿凡達” 部落格，請務必保留此出處http://shamrock.blog.51cto.com/2079212/1565207
JQuery學習筆記-JQuery的動畫效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
