zoukankan      html  css  js  c++  java
  • 浏览器前端相关——动画

    show / hide/toggle('slow')

    直接以无参数形式调用$(selector).show(speed,callback)和hide(),会显示和隐藏DOM元素。但是,只要传递一个时间参数进去,就变成了动画('slow''fast',"normal"或者ms

    show / hide/slideToggle()

    show()hide()是从左上角逐渐展开或收缩的,而slideUp()slideDown()则是在垂直方向逐渐展开或收缩的

    fadeIn / fadeOut/fadeToggle

    fadeIn()fadeOut()的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity属性来实现,而fadeToggle()则根据元素是否可见来决定下一步动作

    animate()

    div.animate({
        opacity: 0.25,
         '256px',
        height: '256px'
    }, 3000, function () {
        console.log('动画已结束');
        // 恢复至初始状态:
        $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
    });//回调函数可选
    
    //jQuery的动画效果还可以串行执行,通过delay()方法还可以实现暂停,这样,我们可以实现更复杂的动画效果,而代码却相当简单:
    
    var div = $('#test-animates');
    // 动画效果:slideDown - 暂停 - 放大 - 暂停 - 缩小
    div.slideDown(2000)
       .delay(1000)
       .animate({
            '256px',
           height: '256px'
       }, 2000)
       .delay(1000)
       .animate({
            '128px',
           height: '128px'
       }, 2000);
    }
    

      

  • 相关阅读:
    03-高级选择器,属性选择器,伪类选择器
    02-css的选择器
    01- css引入方式
    HTML(三)
    HTML(二)
    Sublime text3 插件ColorPicker(调色板)不能使用快捷键的解决方法
    Sublime Text 3 快捷键汇总
    Sublime Text 3下载及常用插件安装
    box-shadow参数以及使用
    jquery.nav.js定位导航滚动插件
  • 原文地址:https://www.cnblogs.com/lyfingchow/p/8029671.html
Copyright © 2011-2022 走看看