码迷,mamicode.com
首页 > Web开发 > 详细

jquery动画效果

时间:2015-11-11 01:06:14      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

1.基本
show()显示效果
$(document).ready(function(){
$("button").click(function(){
//$(".one").show();
$(".one").show("slow");
});
});
hide()隐藏效果
$(document).ready(function(){
$("button").click(function(){
$(".hello").hide();
//$(".hello").hide("slow");
});
});
toggle()隐藏显示自动切换,当目前为显示则隐藏,当目前为隐藏则显示
$(document).ready(function(){
$("button").click(function(){
//$(".one").toggle();
$(".one").toggle("slow");
});
});

<body>
<div>
<p class="one" style="display:none">hello</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
</div>
<div >div
<p class="p1">dp</p>
<p>dp1 <span>sp</span></p>
<p>dp2</p>
</div>
<button >fuzhi</button>
</body>

2.滑动
slideDown()向下显示,slow()是水平与垂直方向同时展开,而slideDown是仅仅在垂直方向向下展开
$(document).ready(function(){
$("button").click(function(){
//$(".one").slideDown();
$(".one").slideDown("fast");
});
});
slideUp()向上隐藏,hide()是水平与垂直两个方向的,而slideUp()仅仅是垂直方向向上收起隐藏
$(document).ready(function(){
$("button").click(function(){
//$(".hello").slideUp();
$(".hello").slideUp("fast");
});
});
slideToggle垂直方向上切换,toggle是水平与垂直两个方向上的,而slideToggle是仅仅垂直方向的。
$(document).ready(function(){
$("button").click(function(){
//$(".hello").slideToggle();
$(".hello").slideToggle("fast");
});
});

<body>
<div>
<p class="one" style="display:none">hello</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
</div>
<div >div
<p class="p1">dp</p>
<p>dp1 <span>sp</span></p>
<p>dp2</p>
</div>
<button >fuzhi</button>
</body>

3.淡入淡出
fadeIn() 以改变透明度来显示
$(document).ready(function(){
$("button").click(function(){
$(".one").fadeIn();
// $(".one").fadeIn("fast");
});
});
fadeOut() 以改变透明度来隐藏
$(document).ready(function(){
$("button").click(function(){
//$(".hello").fadeOut();
$(".hello").fadeOut("slow");
});
});
fadeToggle() 以改变透明度来切换显示隐藏状态
$(document).ready(function(){
$("button").click(function(){
//$(".hello").fadeToggle();
$(".hello").fadeToggle("slow");
});
});
fadeTo() 由指定的时间将透明度改变到指定的透明度
用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度:
$(document).ready(function(){
$("button").click(function(){
$(".hello").fadeTo("slow",0.55)
});
});
<body>
<div>
<p class="one" style="display:none">hello</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
</div>
<div >div
<p class="p1">dp</p>
<p>dp1 <span>sp</span></p>
<p>dp2</p>
</div>
<button >fuzhi</button>
</body>

4.自定义

animate() 自定义动画,一般来说数字变动都可以用于动画。
语法:animate(params,speed,easing,callback);  样式参数,时间,可选择,函数。其中params要用中括号括起来,可以使用的css样式参数。注意要采用骆驼法则,如font-size要写成fontSize。颜色渐变不支持。样式:backgroundPosition,borderWidth、borderBottomWidth、borderLeftWidth,borderRightWidth,borderTopWidth,borderSpacing,margin,marginBottom,marginLeft,marginRight,marginTop,outlineWidth,padding,paddingBottom,paddingLeft,paddingRight,paddingTop,height,width,maxHeight,maxWidth,minHeight,maxWidth,font,fontSize,bottom,left,right,top,letterSpacing,wordSpacing,lineHeight,textIndent

用500毫秒将one移到left为50的地方并且完全清晰显示出来(透明度为1):
$(document).ready(function(){
$("button").click(function(){
$(".one").animate({left: 100, opacity: ‘show‘},500 )
});
});
在600毫秒内切换段落的高度和透明度:
$(document).ready(function(){
$("button").click(function(){
$("div").animate({ height: ‘toggle‘, opacity: ‘toggle‘}, "slow");
});
});

stop()停止正在执行动画
   stop([clearQueue],[gotoEnd]);两个参数均为布尔值,第一个表示,是否停止动画执行、第二个表示,如果停止,是否立即变为执行完成的状态,如果设置为否,则停留在执行一半的状态。
$(document).ready(function(){
$("button").click(function(){
$(".one").show(5000);//此动画正在执行
$(".one").stop();//上一行代码指定的动画停止在一半状态
$(".one").stop(true,true); //停止当前动画,同时动画切换到完成执行状态。
});
});
delay() 延迟执行动画  当一个动画stop()了之后还能够用delay()来延迟执行。从停止位置继续执行。
$("button").click(function(){
$(".one").show(5000);//此动画正在执行
$(".one").stop();//上一行代码指定的动画停止在一半状态
$(".one").stop(true,true); //停止当前动画,同时动画切换到完成执行状态。
$(".one").delay(3000).hide(3000) //表示在3000毫秒后执行hide(3000);
});
});
在.slideUp() 和 .fadeIn()之间延时3000毫秒:
$(document).ready(function(){
$("button").click(function(){
$(".hello").slideUp(1000).delay(3000).fadeIn(1000);
});
});


<body>
<div>
<p class="one" style="display:none">hello</p>
<p class="hello">pp</p>
<p class="p2">dp</p>
</div>
<div class="d"></div>
<button >fuzhi</button>
</body>

 

jquery动画效果

标签:

原文地址:http://www.cnblogs.com/qinyi173/p/4954969.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!