jQuery 基础动画

//1. slideDown()下拉显示$('.show').click(() => {      $('.inner').slideDown(1000, 'linear', () => console.log('显示结束'))    })

//2. slideUp()上拉隐藏$('.hide').click(() => {      $('.inner').slideUp(1000, 'linear', () => console.log('隐藏结束'))    })

//3. slideToggle()切换显示和隐藏$('.toggle').click(() => {      $('.inner').slideToggle(1000, 'linear', () => console.log('切换结束'))    })

$('.show').click(() => {      $('div').fadeIn(2000, 'linear', () => console.log('显示结束'))    })

$('.toggle').click(() => {      $('div').fadeToggle(2000, 'linear', () => console.log('切换结束'))    })

$('.toggle').click(() => {      $('div').fadeToggle(2000, 'linear', () => console.log('切换结束'))    })

$('.to').click(() => {      $('div').fadeTo(1000, 0.5, 'linear', () => console.log('运动结束'))    })

<button>开始</button><script src="./jquery/jquery.min.js"></script>//js部分$('button').click(() => {      $('div').animate({        width: 300,        height: '400px',        borderRadius: '50%',        left: 150,        top: 200,        backgroundColor: 'red'      }, 1000, 'linear', () => console.log('运动结束'))    })

 $('button.start').click(() => {      // 让 div 之前的动画停止在原地, 按照最新的动画进行执行      $('div').stop().slideToggle(1000, 'linear')    })//1. stop() $('.stop').click(() => {      $('div').stop()    })//2. finish()$('.finish').click(() => {      $('div').finish()    })