Jquery动画效果设置大全
Posted binghuazhang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery动画效果设置大全相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
display: none;
}
</style>
</head>
<body>
//Jquery动画设置有下面方法
show() :显示 display->block
hide() 隐藏 display->none
toggle() 切换显示和隐藏
slideDown() 向下滑动 改变display和高度（参数为毫秒，滑动时间）
slideUp() 向上滑动 改变display和高度
slideToggle() 切换上下滑动
fadeIn() 淡入 opacity->1
fadeOut() 淡淡入出 opacity->0
fadeTo() 改变透明度
fadeToggle() 切换淡入淡出
animate() 自定义动画
stop() 停在当前位置
finish() 终止动画，停在最终位置
delay() 设置延迟
//html代码
<button>显示隐藏</button>
<button>结束</button>
<button>停止</button>
<div id="box"></div>
<script type="text/javascript">
//例子
$("button").eq(0).click(function(){
$("#box").show(); //第一个按钮点击的时候，div元素从隐藏的状态显示出来
});
$("button").eq(0).mouseover(function(){
$("#box").show(); //鼠标放到第一个按钮的时候，div元素从隐藏的状态显示出来
}).mouseout(function(){
$("#box").hide(); //鼠标移开时，div元素从显示状态隐藏起来
});
$("button").eq(0).click(function(){
$("#box").toggle(); //第一个按钮点击的时候，div元素从显示状态隐藏起来
});
$("button").eq(0).click(function(){
//$("#box").slideDown(1000); //向下的滑动时间是1秒
$("#box").slideToggle(); //切换上下滑动
});
$("button").eq(0).click(function(){
$("#box").fadeIn(2000); //淡入时间为2秒,淡入的意思是显示出来时间
//$("#box").fadeOut(2000);
$("#box").fadeToggle(2000); //淡入淡出
//$("#box").fadeTo(2000,0.9); //改变透明度
});
$("#box").css("display","block");
$("button").eq(0).click(function(){
$("#box").delay(2000).animate({ //第一个按钮点击的时候，div元素将再2秒后飘逸，
"margin-left":"200px",
"margin-top":"200px"
},2000); //这个时间是指整个过程的持续时间
});
$("button").eq(1).click(function(){
$("#box").finish(); //第二个按钮点击的时候，运动中的动画立刻停在结束位置
});
$("button").eq(2).click(function(){
$("#box").stop(); //第三个按钮点击的时候，正在运动中的动画立刻停止当前位置
});
//部分网页显示效果
</script>
</body>
</html>
以上是关于Jquery动画效果设置大全的主要内容，如果未能解决你的问题，请参考以下文章
动画效果 详情请看 jQuery api 动画收放 slideUp slideDown 通过id class 来设置 jQuery实现效果