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

    jQuery 动画 - animate() 方法

    jQuery animate() 方法用于创建自定义动画。

    $(selector).animate({params},speed,callback);

    必需的 params 参数定义形成动画的 CSS 属性。

    实例:

    $("button").click(function(){
      $("div").animate({left:'250px'});
    });
    注:点击按钮,div元素向右移动250px
     
     
     

    使用相对值

    也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
    $("button").click(function(){
      $("div").animate({
        left:'250px',
        height:'+=150px',
        width:'+=150px'
      });
    });

    使用预定义的值

    您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
    注:这样设置的效果为元素上下滑动至隐藏或显示。

    动画停止

    jQuery stop() 方法用于停止动画或效果,在它们完成之前。

    stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

    $(selector).stop(stopAll,goToEnd);

    两个参数的默认值都为false,都是非必须参数。

    stopAll:是否停止全部动画,默认值false即仅停止活动的动画。

    goToEnd:是否立即完成当前动画。

    实例:

    $(function(){
      $("#flip").click(function(){
        $("#panel").slideDown(5000);

        $("#panel").slideUp(5000);
      });
      $("#stop").click(function(){
        $("#panel").stop();
      });
    });

    当点击flip开始动画后,立即点击stop按钮

    如果stopAll为false,会停止下滑,立即执行上滑动画。

    如果stopAll为true,会停止下滑,后面的上滑动画也不会执行。

    如果goToEnd为false,与上面一样。

    如果goToEnd为true,会停止下滑动画,并立即变为下滑动画完成的状态,再根据stopAll的值决定是否执行上滑动画。

  • 相关阅读:
    多态性的理解
    类(三)——继承与多态
    类(二)——拷贝控制(浅拷贝,深拷贝,浅赋值,深赋值)
    类 (一) ——基本概念
    STL容器底层数据结构的实现
    异常处理
    C++实现单例模式
    类的成员函数的连续调用与返回值问题
    拷贝构造函数的参数为什么必须使用引用类型?拷贝赋值运算符的参数为什么也是引用类型?
    U盘装机教程
  • 原文地址:https://www.cnblogs.com/1016391912pm/p/11923037.html
Copyright © 2011-2022 走看看