jquery 效果，利用jQuery实现页面渐显效果
大家好，今天给各位分享jquery 效果的一些知识，其中也会对利用jQuery实现页面渐显效果进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
利用jQuery实现页面渐显效果
最近在看jQuery就在实际项目里加了个小的应用当时的想法就是点击一个链接跳转到另个页面时页面是逐渐显示出来也就是由透明到实体的一个过程！
说下思路吧在body里用一个div把所有的标签包含住在此div后再定义一个div后面这个div是用来实现渐显效果的
如下所示
<>
<body>
<div id= bodyDiv>
<!省略内部标签>
</div>
<div id= hideDiv></div>
</body>
</>
我的想法是最后一个div定位在整个页面最上层 div的背景设为白色也就完全覆盖了下面的div当点击到该页面时页面加载完时上面这个div开始逐渐消失下面的div便实现了逐渐显现的效果
贴出jQuery代码
<script>
$j(function(){
$j(#hideDiv) css({ top: offset top left: offset left width:$j(#bodyDiv) width() height:$j( form) height() backgroundColor: White opacity: position: absolute})//给hideDiv添加样式
if(jQuery isReady)//这里是判断页面是否加载
{
$j(#hideDiv) fadeOut();//让div逐渐消失的方法
}
});
</script>
代码很简单吧！呵呵！wirte less do more！
lishixinzhi/Article/program/net/201311/11982jQuery内置的几种动画样式
用JavaScript实现动画，原理非常简单：我们只需要以固定的时间间隔（例如，0.1秒），每次把DOM元素的CSS样式修改一点（例如，高宽各增加10%），看起来就像动画了。
但是要用JavaScript手动实现动画效果，需要编写非常复杂的代码。如果想要把动画效果用函数封装起来便于复用，那考虑的事情就更多了。本文主要和大家分享jQuery内置的几种动画样式。
使用jQuery实现动画，代码已经简单得不能再简化了：只需要一行代码！
让我们先来看看jQuery内置的几种动画样式：
show/ hide
直接以无参数形式调用show()和hide()，会显示和隐藏DOM元素。但是，只要传递一个时间参数进去，就变成了动画：
var p=$('#test-show-hide');
p.hide(3000);//在3秒钟内逐渐消失时间以毫秒为单位，但也可以是'slow'，'fast'这些字符串：
var p=$('#test-show-hide');
p.show('slow');//在0.6秒钟内逐渐显示toggle()方法则根据当前状态决定是show()还是hide()。
slideUp/ slideDown
你可能已经看出来了，show()和hide()是从左上角逐渐展开或收缩的，而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的。
slideUp()把一个可见的DOM元素收起来，效果跟拉上窗帘似的，slideDown()相反，而slideToggle()则根据元素是否可见来决定下一步动作：
var p=$('#test-slide');
p.slideUp(3000);//在3秒钟内逐渐向上消失fadeIn/ fadeOut
fadeIn()和fadeOut()的动画效果是淡入淡出，也就是通过不断设置DOM元素的opacity属性来实现，而fadeToggle()则根据元素是否可见来决定下一步动作：
var p=$('#test-fade');
p.fadeOut('slow');//在0.6秒内淡出自定义动画
如果上述动画效果还不能满足你的要求，那就祭出最后大招：animate()，它可以实现任意动画效果，我们需要传入的参数就是DOM元素最终的CSS状态和时间，jQuery在时间段内不断调整CSS直到达到我们设定的值：
var p=$('#test-animate');
p.animate({
opacity: 0.25,
width:'256px',
height:'256px'
}, 3000);//在3秒钟内CSS过渡到设定值animate()还可以再传入一个函数，当动画结束时，该函数将被调用：
var p=$('#test-animate');
p.animate({
opacity: 0.25,
width:'256px',
height:'256px'
}, 3000, function(){
console.log('动画已结束');
//恢复至初始状态:
$(this).css('opacity','1.0').css('width','128px').css('height','128px');
});实际上这个回调函数参数对于基本动画也是适用的。
有了animate()，你就可以实现各种自定义动画效果了：
animate()
串行动画
jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停，这样，我们可以实现更复杂的动画效果，而代码却相当简单：
var p=$('#test-animates');
//动画效果：slideDown-暂停-放大-暂停-缩小
p.slideDown(2000)
.delay(1000)
.animate({
width:'256px',
height:'256px'
}, 2000)
.delay(1000)
.animate({
width:'128px',
height:'128px'
}, 2000);
}
</script>因为动画需要执行一段时间，所以jQuery必须不断返回新的Promise对象才能后续执行操作。简单地把动画封装在函数中是不够的。
为什么有的动画没有效果
你可能会遇到，有的动画如slideUp()根本没有效果。这是因为jQuery动画的原理是逐渐改变CSS的值，如height从100px逐渐变为0。但是很多不是block性质的DOM元素，对它们设置height根本就不起作用，所以动画也就没有效果。
此外，jQuery也没有实现对background-color的动画效果，用animate()设置background-color也没有效果。这种情况下可以使用CSS3的transition实现动画效果。
jQuery中的动画效果有哪些
jQuery中的动画效果有：slideDown,slideUp等实现滑动效果；fadeIn,fadeToggle等实现淡入淡出的效果
jQuery有很多方法可以帮助我们在页面上实现很多有趣好玩的动画效果，而且程序代码简单比用原生态的JavaScript代码实现效果更加方便简洁，今天将在文章中详细和大家介绍几种jQuery动画操作的方法，希望对大家的学习有一定的帮助。
【推荐课程：jQuery动画】
滑动效果
slideDown（）
可以通过高度变化从下往上增大，并且以滑动的方式显示隐藏的内容
$(".btn2").click(function(){
$("p").slideDown();
});slideUp（）
可以通过高度变化从上往下减小
$("p").slideUp("slow");slideToggle([speed],[easing],[fn])
通过高度变化来切换所有匹配元素的可见性
例：快速将段落滑上或滑下，之后弹出一个对话框
$("p").slideToggle("fast",function(){
alert("hello world!"）淡入淡出
fadeIn（）
通过设置不透明度的变化来实现所有匹配元素的淡入效果
例：用200毫秒快速将段落淡入，之后弹出一个对话框
("p").fadeIn("fast",function(){
alert("hello world!");
});fadeOut（）
通过设置不透明度的变化来实现所有匹配元素的淡出效果
例：用200毫秒快速将段落淡出，之后弹出一个对话框
$("p").fadeOut("fast",function(){
alert("hello world!");
});fadeTo（）
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框
$("p").fadeTo("fast", 0.25, function(){
alert("hello world!");
});fadeToggle（）
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
例：用200毫秒快速将段落淡入，之后弹出一个对话框
$("p").fadeToggle("fast",function(){
alert("hello world!");
});案例：当我们鼠标点击按钮时隐藏的内容显示,并且淡出消失
<body>
<div id="box">
<div id="btn">点击这里，显示或隐藏</div>
<div id="content">jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架)</div>
</div>
<script src="jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#content").slideToggle("slow");
$("#content").fadeToggle("slow");
});
});
</script>未加效果前
添加效果后
作业求助使用jQuery变换网页效果
单击“你是人间的四月天”标题后，标题字体大小、颜色变为蓝色，正文的字体颜色变为绿色，单击“查看全部”显示内容简介,可以确定为点击事件，onclick。
在js事件中这么写，$('#id').css({"font-size":"14px","color":"blue"});
第一段代码改变字体大小和颜色。
$('#id1').css("color","green");
第二段代码改变字体颜色
显示简介内容，则判断display即可，点击时设置display为block即可。
$('#id').css("display","block");
关于jquery 效果的内容到此结束，希望对大家有所帮助。