首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery
jQuery动画特效
作者:小萝卜 2023-03-24 【 jquery 】 浏览 250
简介hide和show 同事修改多个样式属性,即高度,宽度,透明度。 fadeIn和fadeOut 只改变不透明度 slideUp和slideDown 只改变高度 fadeTo 只改变透明度 toggle 用来代替hide方法和show方法,所以会同时修改多个样式的属性即高度,宽度和不透明度。 slideToggle 用来代替slideUp和slideDown,只能改变高度。 animate 属于自定义动画的方法,以上各方法的实质都是调用该函数。
hide和show同事修改多个样式属性,即高度,宽度,透明度。
fadeIn和fadeOut只改变不透明度
slideUp和slideDown只改变高度
fadeTo只改变透明度
toggle用来代替hide方法和show方法,所以会同时修改多个样式的属性即高度,宽度和不透明度。
slideToggle用来代替slideUp和slideDown,只能改变高度。
animate属于自定义动画的方法,以上各方法的实质都是调用该函数。
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特效</title>
<style type="text/css">
#all{width:400px;height:400px;background:orange;position:absolute;}
</style>
</head>
<body>
<button>快速显示</button>
<button>快速隐藏</button>
<button>滚动显示</button>
<button>滚动隐藏</button>
<button>渐隐渐显显示</button>
<button>渐隐渐显隐藏</button>
<button>显示隐藏切换</button>
<button>自定义动画</button>
<button>停止动画</button>
<div id="all"></div>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
//第一个
$('button').eq(0).click(function(){
// $('#all').show();
// $('#all').show('fast');//传递一个字符串 slow normal fast
// $('#all').show(2000);//传递一个数字
})
//第二个
$('button').eq(1).click(function(){
// $('#all').hide();
// $('#all').hide('fast');
// $('#all').hide(2000);
})
//第三个
$('button').eq(2).click(function(){
// $('#all').slideDown();
// $('#all').slideDown('slow');
$('#all').slideDown(100);
})
//第四个
$('button').eq(3).click(function(){
// $('#all').slideUp();
// $('#all').slideUp('slow');
$('#all').slideUp(100);
})
//第五个
$('button').eq(4).click(function(){
// $('#all').fadeIn();
// $('#all').fadeIn("slow");
$('#all').fadeIn(1000);
})
//第六个
$('button').eq(5).click(function(){
// $('#all').fadeOut();
// $('#all').fadeOut("slow");
$('#all').fadeOut(1000);
})
//显示切换
$('button').eq(6).click(function(){
$('#all').toggle();
})
//自定义动画
$('button').eq(7).click(function(){
$('#all').delay(2000).animate({
width:'100px',
height:'100px',
left:'200px',
top:'100px'
}, 2000);
})
//停止动画
$('button').eq(8).click(function(){
$('#all').stop();
})
</script>
</body>
</html>
很赞哦! (0)