jQuery动画

自定义动画

	        // para1: object类型，需要动画的样式key:value对象
            // para2: 动画时间，可以缺省，默认为400
            // para3: 动画速率函数，可以缺省
            // para4: 动画结束的回调函数，可以缺省
            // 有些css样式不支持动画
            $('div').animate(
                {
                    opacity: 0.5,
                    height: '400px',
                },
                2000,
                'linear',
                function () {
                    console.log('动画完成了');
                }
            )
                // .delay: 延迟，延迟一定时间
                .delay(4000)
                .animate(
                    {
                        height: '200px',
                    }
                )

animation操作

    	  $('div').hide(); // 隐藏
          $('div').show(); // 显示 
          $('div').toggle();// 显示则隐藏，隐藏则显示
          
          // 渐变 .fadeOut() .fadeIn() .fadeToggle() .fadeTo()
          $('div').fadeOut();
          $('div').fadeIn();
          $('div').fadeToggle();
		  // para1：动画时间
          // para2：透明度终值
          // para3: 动画缓释函数，可以缺省，linear 和 swing
          // para4：动画结束的回调函数
          $('div').fadeTo(1000, 0.5, 'linear', function () {
              console.log('动画结束了');
          });

		  // 滑动动画 .slideDown() .slideUp() .slideToggle()
          $('div').slideDown();
          $('div').slideUp();
          $('div').slideToggle();