zoukankan      html  css  js  c++  java
  • jQuery 中的简单动画

    制作动画常用方法:

       show("速度")   显示元素
       hide("速度")   隐藏元素
       toggle()       切换效果
    例如下jQuery代码:

    $(function () {
                $("#panel heah").toggle(function ()
                {
                    $(this).next().hide();
                }, function ()
                {
                    $(this).next().show();
                })
            })
       fadeOut() fadeIn() 这两个方法是改变元素的不透明度(实现隐藏和显示的效果)

    例如下jQuery代码:
    $(function () {
                $("#panel heah").toggle(function ()
                {
                    $(this).next().fadeOut();
                }, function ()
                {
                    $(this).next().fadeIn();
                })
            })
       slideUp() slideDown() 这两个方法是改变元素的高度
      例如下jQuery代码:
    $(function () {
                $("#panel heah").toggle(function ()
                {
                    $(this).next().slideUp();
                }, function ()
                {
                    $(this).next().slideDown();
                })
            })
       自定义动画:animate(params,speed,function(){ })

    params:一个包含样式属性及值的映射 

    speed:速度 

    function(){ }:在动画完成之后执行的方法

    例如下jQuery代码:

     $(function ()
            {
                $(document).click(function ()
                {
                    $("#leftbox,#rightbox").animate({ -1 + "px" }, 4000, function ()    //将匹配元素的宽度改为-1px ,4秒完成此操作
                    {
                        $("#coverbox").fadeOut(3000);       //当上一操作完成时,将再次匹配的元素慢慢隐藏 ,3秒完成此操作
                    });
                });
                
            });

  • 相关阅读:
    函数对象与闭包
    20.03.19作业
    关键字参数,名称空间和作用域
    作业03.18
    函数第二天
    20.03.17作业
    文件
    20.01.16作业
    前端基础
    前端知识(二)
  • 原文地址:https://www.cnblogs.com/scc-/p/9512541.html
Copyright © 2011-2022 走看看