jQuery的动画

jQuery动画介绍

记得一定要加载jQuery js外部文件！！！

jQuery动画函数的原理 和 move() 运动函数原理相同
都是 通过定时器 将css样式的改变 逐步完成

1. 隐藏显示

$().show()    // 显示
$().hide()    // 隐藏
$().toggle()  // 切换
		// 参数一  时间  单位毫秒
		// 参数二  方式  linear线性
		// 参数三  函数  运动结束 执行的回调函数

  <style>
        *{
            margin: 0;
            padding:0 ;
        }

        div{
            width: 100px;
            height: 100px;
            background: pink;
            margin: 100px auto;
        }
    </style>

	<button name="show">显示</button>
    <button name="hide">隐藏</button>
    <button name="toggle">切换</button>
    <div></div>

 //  显示的点击事件
$('[name="show"]').click(function(){
	$('div').show(1000,'linear',()=>console.log('显示执行完毕'));
})

  // 隐藏的点击事件
$('[name="hide"]').click(function(){
   $('div').hide( 1000 , 'linear' , ()=>console.log('隐藏执行完毕') );
})

// 切换的点击事件
$('[name="toggle"]').click(function(){
    $('div').toggle( 1000 , 'linear' , ()=>console.log('切换执行完毕') );
})

2. 上卷下拉

下拉上卷
    $().slideDown()    // 显示
    $().slideUp()      // 隐藏
    $().slideToggle()  // 切换
       // 参数1   时间    单位毫秒
       // 参数2   方式    liner线性
       // 参数3   函数    运动结束 执行的回调函数

  <style>
        *{
            margin: 0;
            padding:0 ;
        }

        div{
            width: 100px;
            height: 100px;
            background: pink;
            margin: 100px auto;
        }
    </style>

	<button name="show">显示</button>
    <button name="hide">隐藏</button>
    <button name="toggle">切换</button>
    <div></div>

 //  下拉事件
$('[name="show"]').click(function(){
	$('div').show(1000,'linear',function(){conlose.log('下拉完毕')})
})

  // 上卷事件
$('[name="hide"]').click(function(){
   $('div').hide( 1000 , 'linear' , ()=>console.log('上卷完毕') );
})

// 切换的点击事件
$('[name="toggle"]').click(function(){
    $('div').toggle( 1000 , 'linear' , ()=>console.log('切换执行完毕') );
})

渐隐渐现

 渐隐渐现
$().fadeIn()        // 显示
$().fadeOut()       // 隐藏
$().fadeToggle()    // 切换
// 参数1   时间    单位毫秒
// 参数2   方式    liner线性
// 参数3   函数    运动结束 执行的回调函数

$().fadeTo()        // 切换到指定的透明度
// 参数1   时间    单位毫秒
// 参数2   透明度  指定的透明度
// 参数3   方式    liner线性
// 参数4   函数    运动结束 执行的回调函数

<style>
        *{
            margin: 0;
            padding:0 ;
        }

        div{
            width: 100px;
            height: 100px;
            background: pink;
            margin: 100px auto;
        }
    </style>

	<button name="show">显示</button>
    <button name="hide">隐藏</button>
    <button name="toggle">切换</button>
    <button name="to">指定</button>
    <div></div>

 // 显示的点击事件
 $('[name="show"]').click(function(){
		$('div').show(1000,'linear',function(){console.log(){'显示执行完毕'}})
})


 // 隐藏的点击事件
$('[name="hide"]').click(function(){
        $('div').fadeOut( 1000 , 'linear' , ()=>console.log('隐藏执行完毕') );
})
        

// 切换的点击事件
$('[name="toggle"]').click(function(){
       $('div').fadeToggle( 1000 , 'linear' , ()=>console.log('切换执行完毕') );
})

// 指定的点击事件
$('[name="to"]').click(function(){
      $('div').fadeTo( 1000 , 0.5 , 'linear' , ()=>console.log('切换执行完毕') );
})

自定义动画

自定义动画
$().animate()
// 参数1   运动的属性  { top:100, left:100 }
// 参数2   运动的时间  单位毫秒
// 参数3   运动的方式  linear 线性
// 参数4   运动结束的回调函数

<style>
        *{
            margin: 0;
            padding:0 ;
        }

        div{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            left:50px;
            top:50px;
        }
    </style>

	<button name="go">过去</button>
    <button name="back">回来</button>

    <div></div>

<script>

// 显示的点击事件
$('[name="go"]').click(function(){
       $('div').animate( {left:500,top:500,width:500,height:500, opacity:0.5} , 1000 , 'linear' , ()=> console.log('过去的运动结束了') )
})
        
// 隐藏的点击事件
$('[name="back"]').click(function(){
       $('div').animate( {left:50,top:50,width:100,height:100 , opacity:1} , 1000 , 'linear' , ()=> console.log('回来运动结束了') )
})

</script>

结束动画

结束动画
$().stop()    
$().finish()

<style>
        *{
            margin: 0;
            padding:0 ;
        }

        div{
            width: 100px;
            height: 100px;
            background: pink;
            position: fixed;
            left:50px;
            top:50px;
        }
    </style>

	<button name="go">过去</button>
    <button name="back">回来</button>

    <div></div>

<script>

// 显示的点击事件
$('[name="go"]').click(function(){
      $('div').animate( {left:300,top:300} , 1000 , 'linear' , ()=> console.log('过去的运动结束了') )
})
        
// 隐藏的点击事件
// $('[name="back"]').click(function(){
// 在 执行 新的 animate() 运动之前 
// 以 stop() 方式 结束没有执行完毕的运动
// stop() 是 在 当前位置 执行新的运动
$('div').stop().animate( {left:50,top:50} , 1000 , 'linear' , ()=> console.log('回来运动结束了') )
})

// 隐藏的点击事件
$('[name="back"]').click(function(){
	// 在 执行 新的 animate() 运动之前 
	// 以 finish() 方式 结束没有执行完毕的运动
$('div').finish().animate( {left:50,top:50} , 1000 , 'linear' , ()=> console.log('回来运动结束了') )
})

<script>
/*
		jQuery的运动函数
			默认 是 使用 async 和 await 按照顺序 一个一个的执行
			上一个运动没有执行结束 不会触发下一个运动的执行
			防止同时有多个运动被触发执行

        jQuery的运动结束
            不是接触当前触发的运动 
			是 结束 之前没有执行完毕的运动
			结束没有执行完毕的运动之后 再触发执行新的运动
			本质就是 确保不能同时执行多个运动

        $().stop()
            在 运动的当前位置 立即终止没有执行完毕的运动
            在 当前位置 触发执行 新的运动

		$().finish()
            在 运动的当前位置 立即终止没有执行完毕的运动
            在 上一个运动的结束位置 触发执行 新的运动
              
*/

</script>