zoukankan      html  css  js  c++  java
  • jQuery 动画

    动画效果
    slideDown(100)下到上显示
    slideToggle(100)上到下显示
    slideUp(100)上到下隐藏
    fadeIn(100)淡淡显示
    fadeOut(100)淡淡显示
    fadeToggle()自动切换
    hide(100)右下角隐藏
    show(100)左上角显示
    animate({},100)自定义动画
    fast 200毫秒
    slow 600毫秒
    默认400毫秒
    toggle判断

    stop()取消动画效果

    列队动画方法

    使用回调函数,强行将.css()方法排队到.slideDown()之后
    $('#box').slideUp('slow').slideDown('slow',function(){
    $(this).css('background','orange');
    });

    使用.queue()方法模拟动画方法跟随动画方法之后
    $('#box').slideUp('slow').slideDown('slow').queue(function(){
    $(this).css('background','orange');
    });

    使用 next 参数来实现继续调用列队动画
    $('#box').slideUp('slow').slideDown('slow').queue(function(next){
    $(this).css('background','orange');
    next();
    }).hide('slow');

    使用顺序调用的列队,逐个执行,非常清晰
    $('#box').slideUp('slow');
    $('#box').slideDown('slow');
    $('#box').queue(function(){
    $(this).css('background','orange');
    $(this).dequeue();
    })
    $('#box').hide('slow');

    获取当前列队的长度,fx 是默认列队的参数
    functioncount(){
    return$("#box").queue('fx').length;
    }

    在某个动画处调用
    $('#box').slideDown('slow',function(){alert(count());});

    清理动画列队
    $('#box').slideDown('slow',function(){$(this).clearQueue()});

    动画相关方法

    强制停止运行中的
    stop(true,true);
    第一个参数表示是否取消列队动画,默认为 false。如果参数为 true,当有列队动 画的时候,会取消后面的列队动画。
    第二参数表示是否到达当前动画结尾,默认为 false。 如果参数为 true,则停止后立即到达末尾处。

    动画全局属性
    设置运行帧数为1000毫秒 默认为 13
    $.fx.interval=1000;

    设置动画为关闭 true 默认为 false
    $.fx.off=true;

  • 相关阅读:
    Oracle VM VirtualBox安装centos8
    HTML5 离线缓存manifest
    ES6 Proxy函数和对象的增强
    ES6 Map数据结构
    ES6 Set和WeakSet
    ES6Symbol在对象中的应用
    ==,===,与ES6中is()的区别
    ES6对象操作
    ES6函数和数组补漏
    ES6箭头函数
  • 原文地址:https://www.cnblogs.com/xiukang/p/8968193.html
Copyright © 2011-2022 走看看