jQuery动画

最新推荐文章于 2022-12-22 17:52:21 发布

m_syndra

最新推荐文章于 2022-12-22 17:52:21 发布

阅读量327

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/m_syndra/article/details/79331197

版权

jQuery动画

一、固定动画

1. 动画效果 show()方法，hide()方法

（1）动画效果的显示功能

show(speed,[callback])

（2）动画效果的隐藏功能

hide(speed,[callback])

speed:给固定动画设置时间(slow、normal、fast、数字[单位：毫秒])；

callback:回调函数；

P.S．如果不需要回调函数，通常不加时间，直接为 eg. $(this).show()

（3）toggle()方法

其有三种调用形式

无参数调用	toggle()
逻辑参数调用	toggle(true/false) [true表示显示;false表示隐藏]
动画效果调用	toggle(speed,[callback])

实例：

<!DOCTYPE html>

<html>

$(function (){

//固定动画 show(speed,callback) 显示隐藏 hide(speed,callback)

//toggle() 相当于显示隐藏进行判断

$(".li_header").each(function(){

$(this).show(1000,function(){

$(this).css("backgroundColor","pink");

// hide 隐藏同理

});

$(this).toggle(1,function (){

$(this).css("color","red");

});

</script>

<style>

.ul_header{

margin: 0;

padding: 0;

}

.li_header{

list-style: none;

float: left;

border: 1px solid silver;

text-align: center;

line-height: 35px;

height: 35px;

width: 100px;

}

</style>

</head>

<body>

</ul>

</body>

</html>

2. 滑动效果

（1）上滑效果

slideUp(speed,[callback])

（2）下滑效果

slideDown(speed,[callback])

（3）判断上滑下滑

slideToggle(speed,[callback])

实例：

<!DOCTYPE html>

<html>

$(function(){

$(".updown").mouseenter(function () {

$(this).slideUp(1000,function(){

$(this).slideDown(1000)

});

//slideUp() 上滑 slideDown() 下滑

});

$(".toggleit").mouseenter(function () {

$(this).slideToggle(1000,function () {

$(this).slideToggle(1000)

})

//slideToggle() 判断上滑下滑

});

})

</script>

<style>

.updown{

width: 100px;

height: 100px;

margin: 300px;

background-color: #00fff8;

}

.toggleit{

width: 100px;

height: 50px;

position: fixed;

top: 50px;

left:500px;

background-color:orange ;

}

</style>

</head>

<body>

<divclass="updown"></div>

<divclass="toggleit"></div>

</body>

</html>

3. 淡入淡出效果

（1）淡入效果

fadeIn(speed,[callback])

（2）淡出效果

fadeOut(speed,[callback])

（3）判断淡入淡出

fadeToggle(speed,[callback])

（4）将透明度改到指定的某个值

fadeTo(speed,opacity,[callback])

实例：

<!DOCTYPE html>

<html>

<title>淡入淡出效果</title>

$(function(){

$(".images").each(function (){

$(this).css("zIndex",0);

$(this).children("img").fadeOut(1000);

});

//fadeOut() 淡出

$(".images").each(function () {

$(this).css("zIndex",0);

$(this).children("img").fadeIn(1000);

});

//fadeIn() 淡入

$(".images1").each(function () {

$(this).css("zIndex",0);

$(this).mouseenter(function (){

$(this).children("img").fadeToggle(1000);

})

});

//fadeToggle() 判断淡入淡出

})

</script>

<style>

.images,.images1{

width: 400px;

height: 300px;

}

.images>img,.images1>img{

width: 400px;

height: 300px;

}

.images{

margin: 0 auto;

}

.images1{

margin: 0 auto;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

二、自定义动画

1.简单的动画

animate(params,[duration],[easing],[callback])

params：执行动画的相关属性；

duration：时间(slow、normal、fast、数字[单位：毫秒])；

easing：动画效果(linear,swing…)；

callback：回调函数；

2.移动位置的动画

即改变其相对位置要使页面中的元素以动画效果移动，必须首先将该元素的“position”属性设置成“relative”或“absolute”，否则无法移动该元素

3.队列中的动画

动画的队列即同一个对象具有多组动画。当执行时，是等待动画执行完成后再去执行。

三、动画的停止和延时

（1）stop()方法

功能：停止所选元素中正在执行的动画

stop([clearQueue],[gotoEnd])

clearQueue：布尔值，表示是否停止正在执行的动画；

gotoEnd：布尔值，表示是否立即完成正在执行的动画；

（2）delay()方法

功能：设置一个延时值来推迟后续对列中动画的执行

delay(duration,[queueName])

duration：延时的时间值，单位毫秒；

queueName：动画对列的名称；

实例：

<!DOCTYPE html>

<html>

<title>自定义动画</title>

$(function (){

/*animate基本写法*/

$("#startAnimate").click(function (){

//动画的移动

$(".block").animate({

"marginLeft":"400px",

"marginTop":"400px"

},1000);

});

/*动画的队列同一个对象具有多组动画*/

$("#startAnimateArray").click(function (){

$(".block").animate({"marginLeft":"500px"},500)

.animate({"marginTop":"500px"},500)

.animate({"marginLeft":"0px"},500)

.animate({"marginTop":"0px"},500);

});

/*delay() 延迟动画 */

$("#endAnimate").click(function (){

$(".block").stop(false,true);

});

</script>

<style>

.block{

width: 200px;

height: 200px;

background-color: red;

}

</style>

</head>

<body>

<button id="startAnimate">开始执行动画</button>

<buttonid="startAnimateArray">执行动画队列</button>

<divclass="block"></div>

</body>

</html>

m_syndra

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动画

jQuery动画一、固定动画1. 动画效果 show()方法，hide()方法（1）动画效果的显示功能show(speed,[callback])（2）动画效果的隐藏功能hide(speed,[callback])speed:给固定动画设置时间(slow、normal、fast、数字[单位：毫秒])；callback:回调函数；P.S．如果不需要回调函数，通常不加时间，直...
复制链接

扫一扫