zoukankan      html  css  js  c++  java
  • (21)jq动画

    jq动画的优点

    优点:

    1、可以知道动画结束的表示(结束的回调函数)

    2、可以利用jq动画插件完成复杂的动画

    动画有三个参数:动画的样式是字典、动画持续的事件,动画结束回调函数

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>jq动画</title>
    <style>
    .box {
    200px;
    height: 200px;
    background-color: orange;
    }
    </style>
    </head>
    <body>
    <div class="box"></div>
    </body>
    <script src="js/jq.js"></script>
    <script>
    //鼠标点击切换回圆,鼠标离开恢复,通过两个事件来完成
    //动画有三个参数:动画的样式是字典、动画持续的事件,动画结束回调函数
    $('.box').click(function () {
    //点击变成圆
    $(this).animate({
    borderRadius:'50%' //这里还可以安装jq的插件,就是直接调用jq的插件,也可以自定意义插件
    },100,function () {
    console.log('我是动画结束的标识')
    }) //1秒就是1000
    });
    $('.box').mouseout(function () {
    //鼠标移走恢复原样
    $(this).animate({
    borderRadius:'0'
    },100,function () {
    console.log('我是动画恢复的标识')
    }) //1秒就是1000
    })



    </script>
    </html>
  • 相关阅读:
    四套读写方案
    如何保证ArrayList线程安全
    异常总结<经典例题>
    java.移位运算符
    java反射机制
    面试题:return和finally执行
    Spring_通过注解配置 Bean(1)
    Spring_通过 FactoryBean 配置 Bean
    Spring_通过工厂方法配置 Bean
    Spring_管理 Bean 的生命周期
  • 原文地址:https://www.cnblogs.com/shizhengquan/p/10450343.html
Copyright © 2011-2022 走看看