• jQuery动画效果


    jQuery动画效果

    1.显示动画

    • 无参数,让指定的元素显现出来,底层通过display:block实现

      •    $("div").show();
    • 通过控制元素的宽高,透明度,display属性,逐渐显示,例如3秒后显示完毕

      •  $('div').show(3000);
      • 参数

        • slow 慢:600ms

        • normal 正常 400ms

        • fast 快:200ms

      • 动画执行完毕后立即执行回调函数

        •   //show(毫秒值,回调函数;
              $("div").show(5000,function () {
                  alert("动画执行完毕!");
              );

    2.隐藏动画

    •      $(selector).hide();
       
          $(selector).hide(1000);
       
          $(selector).hide("slow");
       
          $(selector).hide(1000, function(){});

    3.开关式显示隐藏动画

    •  $('#box').toggle(3000,function(){});
    • 显示和隐藏的拉回切换采用的是toggle()方法,就是先执行show(),再执行hide()

    •      $('#btn').click(function(){
                  $('#box').toggle(3000,function(){
                      $(this).text('盒子出来了');    
                      if ($('#btn').text()=='隐藏') {
                          $('#btn').text('显示');    
                      }else{
                          $('#btn').text('隐藏');    
                      }
                  });
              })

    4.滑入和滑出

    • 滑入,下拉动画,显示元素

      •  $(selector).slideDown(speed, 回调函数);
    • 滑出,上拉动画,隐藏元素

      •  $(selector).slideUp(speed, 回调函数);
    • 滑入滑出动画效果切换

      •  $(selector).slideToggle(speed, 回调函数);

    5.淡入淡出效果

    • 淡入动画效果,

      •   $(selector).fadeIn(speed, callback);
    • 淡出动画效果

      •  $(selector).fadeOut(1000);
    • 淡入淡出动画效果来回切换

      •   $(selector).fadeToggle('fast', callback);

    6.自定义动画

    •   $(selector).animate({params}, speed, callback);
    • 作用:执行一组CSS属性的自定义动画

      • 第一个参数:要执行动画的CSS属性(必选)

      • 第二个参数:执行动画的时长:可选

      • 第三个动画:动画执行完毕后,立即执行的回调函数(可选)

    7.停止动画

    •  $(selector).stop(true, false);
    • 参数说明

      • 第一个参数:true表示后续动画不执行,false表示后续动画执行

      • 第二个参数:true表示立即执行完成当前动画,false表示立即停止当前动画

      • 如果参数都不写,默认两个参数都是false,实际常用的是stop(),

  • 相关阅读:
    创建一个Phone实体,完成多页面的电话簿项目
    ABP教程-对Person信息进行操作
    完善Person页面的视图操作功能
    实现ABP中Person类的权限功能
    在ABP中创建Person实体类
    ABP教程-给项目添加SwaggerUI,生成动态webapi
    ABP教程-通过ABPboilerplate模版创建项目
    EF Codefirst 多对多关系 操作中间表的 增删改查(CRUD)
    ORM小练习代码
    Tomcat中work目录
  • 原文地址:https://www.cnblogs.com/W-Y-C/p/11377267.html
Copyright © 2020-2023  润新知