JQuery学习笔记-JQuery的动画效果
Untitled Document
*{
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
}
/*
$(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;
});
})
//
什么是JQuery？
JQuery是一个JavaScript库。
创新互联公司主营梁子湖网站建设的网络公司,主营网站建设方案,成都app软件开发公司,梁子湖h5微信小程序开发搭建,梁子湖网站营销推广欢迎梁子湖等地区企业咨询
$(document).ready(function()
{
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
}
)
附件：http://down.51cto.com/data/2364959
文章标题：JQuery学习笔记-JQuery的动画效果
文章路径：
http://chengdu.cdxwcx.cn/article/ghgssc.html
