1、动画效果1
<meta charset="UTF-8">
<title>动画效果上</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: red;
border-radius: 30px;
margin-top: 10px;
}
.aa{
padding: 5px;
margin-right: 5px;
background-color: orange;
float: left;
display: none;
}
</style>
</head>
<body>
<!--1、显示和隐藏-->
<div class="aa">你</div>
<div class="aa">好</div>
<div class="aa">吗</div>
<div class="aa">?</div>
<input type="button" class="show" value="显示">
<input type="button" class="hide" value="隐藏">
<input type="button" class="tog" value="切换">
<input type="button" class="up" value="上">
<input type="button" class="down" value="下">
<input type="button" class="ud" value="切换">
<input type="button" class="danru" value="淡入">
<input type="button" class="danchu" value="淡出">
<input type="button" class="qiehuan" value="切换">
<input type="button" class="danto" value="淡出到">
<div class="box">
box
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
// 1、用show和hide实现显示和隐藏,这里默认没有传递任何参数
// $(".show").on('click',function () {
// $('.box').show()
// })
// $(".hide").on('click',function () {
// $('.box').hide()
// })
// 2、这里默认可以传递2个参数，一个是速度(单位为毫秒),第二个是回调函数
//速度实现的效果有变化和透明度2个效果
// $(".show").on('click',function () {
// $('.box').show(5000)
// })
// $(".hide").on('click',function () {
// $('.box').hide(5000)
// })
// 第二个参数是回调函数，等待第一个执行完毕，就执行回调函数定义的代码，我们这里就给alert的代码
// $(".show").on('click',function () {
// $('.box').show(5000,function () {
// alert('显示完毕')
// })
// })
// $(".hide").on('click',function () {
// $('.box').hide(5000,function () {
// alert("隐藏完毕")
// })
// })
// $('.show').on('click',function () {
// $('.aa').first().show(1000,function testshow() {
// $(this).next().show(2000,testshow)
// })
// })
// $('.hide').on('click',function () {
// $('.aa').last().hide(1000,function testhide() {
// $(this).prev().hide(2000,testhide)
// })
// })
// toggle实现用一个按钮来实现显示和隐藏两种功能
// $(".tog").on('click',function () {
// $('.box').toggle(1000)
// })
// })
//-------------------------------------------------------------------------------------------------------------
//实现一个向上和向下卷动的效果
// $(".up").on('click',function () {
// $(".box").slideUp(700)
// })
// $(".down").on('click',function () {
// $(".box").slideDown(700)
// })
// $(".ud").on('click',function () {
// $(".box").slideToggle(700)
// })
//-------------------------------------------------------------------------------------------------------------
//实现一一个淡入到淡出的效果
// $(".danchu").on('click',function () {
// $('.box').fadeOut(1000)
// })
// $(".danru").on('click',function () {
// $(".box").fadeIn(1000)
// })
//
// $(".qiehuan").on('click',function () {
// $('.box').fadeToggle(1000)
// })
// $("danto").on('click',function () {
// $(".box").fadeTo(1000,0.50)
// })
})
</script>
2、动画效果2
<meta charset="UTF-8">
<title>动画效果中</title>
<style>
.aa{
width: 500px;
height: 500px;
background-color: red;
border-radius: 30px;
margin-top: 10px;
position: absolute;
font-size: 20px;
left: 500px;
}
.bb{
padding: 5px;
margin-right: 5px;
background-color: orange;
float: left;
display: none;
position: absolute;
left: 500px;
}
</style>
</head>
<body>
<input type="button" class="text" value="按钮">
<div class="aa">
box
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
// $('.text').on('click',function () {
//
//// 这里实现的效果就是定义一个最终的实现效果的css的样式
// $('.aa').animate({
// width:'100px',
// height:"100px",
// })
// })
//animate是一个自定义方法，第一个参数必须要传，其他两个参数可以不传递，一共有三个参数，第一个参数是一个键值对，主要是说明动画后的css样式，第二个参数是时间，第三个参数是回调函数，也就是
// 动画完成成后，执行的函数，这里这个函数就只alert一段话就完毕了
// $(".text").on('click',function () {
// $('.aa').animate(
// {
// width: '100px',
// height: '100px'
// },1000,function () {
// alert("动画执行完毕")
//
// }
// )
// })
//-------------------------------------------------------------------------------------------------------------
//实现第一个位置变化，就是一个位置的css样式的变化
// $('.text').on('click',function () {
// $(".aa").animate(
// {
// left:'100px',
// height:'100px',
// },1000,function () {
// alert("动画执行完毕")
//
// }
// )
// })
//这个实现的效果就是每次点击按钮距离做边框的距离增加100个像素，每次点击位置都会发送变化
// $('.text').on('click',function () {
// $(".aa").animate(
// {
// left:'+=100px',
// height:'+=100px',
// },1000,function () {
// alert("动画执行完毕")
//
// }
// )
// })
//上面实现的效果所有的变化都是同步去变化的，如果我们想实现一个这样的效果，该如何处理呢，就是先变长，在变高，。。。。
// $(".text").on('click',function () {
// $('.aa').animate({left:'100px'},3000,function () {
// alert("第一个变化完成")
// }).animate({height:'200px'},3000,function () {
// alert("第二个变化完成")
// }).animate({width:'200px'},3000,function () {
// alert("第三个变化完成")
// }).animate({fontSize:'100px'},3000,function () {
// alert("第四个变化完成")
// })
// })
})
3、动画效果3
<meta charset="UTF-8">
<title>动画效果下</title>
<style>
.aa{
width: 100px;
height: 100px;
background-color: red;
border-radius: 30px;
margin-top: 10px;
position: absolute;
font-size: 20px;
}
.cc{
width: 100px;
height: 100px;
background-color: green;
border-radius: 30px;
position: absolute;
margin-top: 300px;
font-size: 20px;
}
.bb{
padding: 5px;
margin-right: 5px;
background-color: orange;
float: left;
display: none;
position: absolute;
left: 500px;
}
</style>
</head>
<body>
<input type="button" class="text" value="按钮">
<input type="button" class="stop" value="停止">
<div class="aa">
box
</div>
<div class="cc">
pox
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
//动画的相关方法
// 1、停止动画 stop
// $('.text').on('click',function () {
// $('.aa').animate({left:'80%'},5000)
// })
// $(".stop").on('click',function () {
// $(".aa").stop()
// })
//如果有列队动画，会停止第一个列队的动画，然后正常执行后面的动画，也就是该停止按钮对后面的动画不生效
// $(".text").on('click',function () {
// $(".aa").animate({left:'50%'},2000).animate({top:'80%'},2000).animate({width:'400px'},2000)
// })
// $(".stop").on('click',function () {
// $(".aa").stop()
// })
//stop如果不加任何参数，则效果就是上面的效果，那么如果加参数的呢？那么在看下面的说明
//第一个参数:true，就是停止并且清理掉后面的队列动画，动画完全停止，后面未执行完成的动画不在执行
//第二个参数:true，停止后，会跳转到末尾的位置上，而仅仅是位置，如果有其他的css样式，这里是不会渲染的
// $(".text").on('click',function () {
// $(".aa").animate({left:'50%'},2000).animate({top:'80%'},2000).animate({width:'400px'},2000)
// })
// $(".stop").on('click',function () {
// $(".aa").stop(true,true)
// })
//时间延迟，delay(2000)，就是延迟2在执行
// $(".text").on('click',function () {
// $(".aa").animate({left:'50%'},2000).animate({top:'80%'},2000).delay(2000).animate({width:'400px'},2000)
// })
// $(".stop").on('click',function () {
// $(".aa").stop()
// })
//swing ：变化的速度一直匀速
//linear：先速度快，然后慢，最后在再快
// $('.text').on('click',function () {
// $('.aa').animate({left:'90%'},2000,'swing')
// })
// $('.text').on('click',function () {
// $('.cc').animate({left:'90%'},2000,'linear')
// })
})
</script>