zoukankan      html  css  js  c++  java
  • jQuery学习之动画

    一,show()和hide()

    show()和hide()方法在不带任何参数的情况,相当于css(“display”,“none/block/inline”),

    作用是立即隐藏或显示匹配的元素,不会有任何动画。

    如果需要带动画,可以向show()方法中,加入参数

    exp:$('#id').show("slow");

           $('#id').show(1000);//1000毫秒,相当于1秒

    二,fadeIn()和fadeOut()

    这两个方法只改变元素的透明度,fadeOut()在指定的一段时间内降低元素的不透明度,直到

    元素完全消失("display:none");fadeIn()正好相反。

    三,slideUp()和slideDown()

    这两个方法只会改变元素的高度

    四,自定义动画animate()

    可以自定义动画,同时改变元素的高度,宽度,不透明度。

    animate(params,speed,callback)

    params:一个包含样式属及值得映射{property1:"value1",property:"value2"}

    speed:速度参数,可选

    callback:在动画完成执行时的函数,可选

    $(function(){

          $("#panel").click(function(){

                      $(this).animate({left:"+=500px"},300);  //在当前位置累加500px

    });

    })

    五,动画回调函数

    动画最后一步时改变元素的样式

    $(function(){

          $("#panel").click(function(){

                      $(this).animate({left:"+=500px",opacity:"1"},300);

                                   .animate ({top:"200px","200px"},3000,function(){

                                        $(this).css("border","5px solid blue");

    });

    })

    六,停止动画和判断是否处于动画状态

    1,停止元素的动画

    stop([clearQueue],[gotoEnd])

    clearQueue 是否清空未执行的动画队列

    gotoEnd     是否直接将正在执行的动画跳转到末状态

    2,判断元素是否处于动画状态

    if(!$(element).is(":animated")){

      //如果当前没有进行动画,则添加新的元素

    }

    3,延迟动画 delay()

    七,其他动画方法

    toggle()

    切换可见状态

    slideToggle()

    通过高度变化切换元素的可见性

    fadeTo()

    可以把元素的不透明度以渐进的方式调整到指定值

    fadeToggle

    通过透明度的方式切换元素的可见性

  • 相关阅读:
    C++入门经典-例4.9-输出不同生命周期的变量值
    C++入门经典-例4.8-同名的全局变量和局部变量
    C++入门经典-例4.7-变量的作用域
    C++入门经典-例4.6-使用重载函数
    C++入门经典-例4.5-利用循环求n的阶乘
    C++入门经典-例4.4-循环嵌套之求n的阶乘
    C++入门经典-例4.3-函数的递归调用之汉诺塔问题
    C++入门经典-例4.2-调用默认参数的函数
    C++入门经典-例4.1-声明、定义和使用函数
    C++入门经典-例3.25-使用循环输出闰年
  • 原文地址:https://www.cnblogs.com/fnncat/p/4885859.html
Copyright © 2011-2022 走看看