首页 > 软件开发 > JQUERY >

如何使用jquery实现动画效果

来源:互联网 2023-03-17 00:46:41 版权归原作者所有,如有侵权,请联系我们

在网页中,动画效果会让我们眼前一亮,所以,今天我们就来看看如何使用jquery实现动画效果;Skx办公区 - 实用经验教程分享!

方法/步骤

  • 1

    创建一个记事本文档,之后要记录代码的,如图所示;Skx办公区 - 实用经验教程分享!

    如何使用jquery实现动画效果Skx办公区 - 实用经验教程分享!

  • 2

    书写一个div块,之后我们在这个div上面做一个动画效果;Skx办公区 - 实用经验教程分享!

    如何使用jquery实现动画效果Skx办公区 - 实用经验教程分享!

  • 3

    接下来引入jquery,如图,script src="jquery.js"/>;Skx办公区 - 实用经验教程分享!

    如何使用jquery实现动画效果Skx办公区 - 实用经验教程分享!

  • 4

    书写script>/script>标签,用于书写js代码;Skx办公区 - 实用经验教程分享!

    如何使用jquery实现动画效果Skx办公区 - 实用经验教程分享!

  • 5

    我们要使用的是animate()方法,自定义动画效果;Skx办公区 - 实用经验教程分享!

    如何使用jquery实现动画效果Skx办公区 - 实用经验教程分享!

  • 6

    如图所示,$("div").animate({left:'250px'});,可以使div以动画效果改变位置;Skx办公区 - 实用经验教程分享!

    如何使用jquery实现动画效果Skx办公区 - 实用经验教程分享!

  • 7

    如图所示,我们可以设置多个属性;Skx办公区 - 实用经验教程分享!

    $("div").animate({left:'250px',height:'150px' });Skx办公区 - 实用经验教程分享!

    如何使用jquery实现动画效果Skx办公区 - 实用经验教程分享!

  • 7此文章未经许可获取自百度经验
  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!Skx办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号