您的位置：首页 > Web前端 > JQuery

jQuery---动画

2019-01-19 11:55 1876 查看

隐藏和显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px; height: 200px; background-color: yellow; display: none;">我是一个div标签</div>
<button id="btnShow">显示元素</button>
<button id="btnHide">隐藏元素</button>

<button id="btnToggle">切换隐藏和显示</button>
<script src="../js/jquery.min.js"></script>
<script>
/**
* 隐藏和显示动画函数
*  1.show():显示元素
*  2.hide():隐藏元素
*  以上2个动画函数可以带上2个可选参数，参数1：动画执行过程中花费的时间，单位毫秒  参数2：动画执行完成后调用的回调函数
*  还有1个切换动画的函数
*  toggle():在隐藏和显示之间切换，如果当前元素是隐藏的，就显示元素，否则就隐藏元素
*/
$('#btnShow').click(function(){
//动画持续5秒钟
$('div').show(5000,function(){
console.log("元素显示完毕");
});
})
$('#btnHide').click(function(){
$('div').hide(5000,function(){
console.log("元素隐藏完毕");
});
})
$("#btnToggle").click(function(){
$('div').toggle(5000,function(){
console.log("元素切换完毕");
})
})
</script>
</body>
</html>

淡入和淡出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div>
<button id="btnfadeIn">淡入元素</button>
<button id="btnfadeOut">淡出元素</button>

<button id="btnToggle">切换淡入和淡出</button>

<button class="fade-to">给定的不透明度</button>

<script src="../js/jquery.min.js"></script>
<script>
/**
* 淡入和淡出动画函数
*  1.fadeIn():淡入元素，在指定时间内增加元素的不透明度,opacity[0,1.0]
*  2.fadeOut():淡出元素，在指定时间内减小元素的不透明度,opacity[1.0,0]
*  以上2个动画函数可以带上2个可选参数，参数1：动画执行过程中花费的时间，单位毫秒  参数2：动画执行完成后调用的回调函数
*  还有1个切换动画的函数
* fadeToggle():如果元素已淡出，则给它添加淡入动画效果，否则给它添加淡出动画效果
*
* fadeTo()：让元素在指定时间内达到一个指定的不透明度，参数1是动画执行花费的时间，参数2是动画结束后
* 达到的不透明度，参数3是动画完成后调用的函数
*/
$('#btnfadeIn').click(function(){
//淡出元素
$("div").fadeIn(5000,function(){
console.log("淡入动画完成");
});
})
$('#btnfadeOut').click(function(){
//淡出元素
$("div").fadeOut(5000,function(){
console.log("淡出动画完成");
});
})
$("#btnToggle").click(function(){
$("div").fadeToggle(5000,function(){
console.log("切换动画完成");
});
})

$(".fade-to").click(function(){
$("div").fadeTo(5000,0.2,function(){
console.log("动画结束后，元素的不透明度是0.2");
})
});
</script>
</body>
</html>

展开和收起

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div>
<button id="btnSlideDown">展开元素</button>
<button id="btnSlideUp">收起元素</button>

<button id="btnToggle">切换</button>

<script src="../js/jquery.min.js"></script>
<script>
/**
* 展开和收起动画函数
*  1.slideUp():在一定时间内将元素向上收起，降低元素的高度，直到元素完全消失(display:none)
*  2.slideDown():在一定时间内将元素向下展开，增加元素的高度，直到元素完全显示(display:block)
*  以上2个动画函数可以带上2个可选参数，参数1：动画执行过程中花费的时间，单位毫秒  参数2：动画执行完成后调用的回调函数
*  还有1个切换动画的函数
* slideToggle():切换动画，在展开和收起之间切换
*/
$('#btnSlideDown').click(function(){
//展开元素,向下滑动
$("div").slideDown(5000,function(){
console.log("元素展开动画完成");
});
})
$('#btnSlideUp').click(function(){
//收起元素，向上滑动
$("div").slideUp(5000,function(){
console.log("元素收起动画完成");
});
})
$("#btnToggle").click(function(){
//切换动画
$("div").slideToggle(5000,function(){
console.log("元素展开收起切换动画完成");
})
})
</script>
</body>
</html>

自定义动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">我是一个div标签</div>

<button id="btnAnimate">自定义动画</button>
<script src="../js/jquery.min.js"></script>
<!-- 引入颜色插件 -->
<script src="../js/jquery.color.js"></script>
<script>
/* 	 自定义动画:使用animate()方法创建自定义的动画，四个参数如下：
* params:一组包含作为动画属性和终值的样式属性和及其值的集合，即动画完成后要达到的样式效果，写成{样式名:值,样式名2:值2}

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。
*
*/
$("#btnAnimate").click(function(){
$("div").animate({"width":"400px","height":"400px","background-color":"red"},
8000,"linear",
function(){
console.log("自定义动画完成");
});
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航