zoukankan      html  css  js  c++  java
  • jquery几个动画的用法和异同

    一。控制元素的显示及隐藏

    show( )控制元素的显示hide( )控制元素的隐藏

    1 $(selector).show([speed],[callback]); 
    2  //speed可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast
    3 
    4 $(selector).hide([speed],[callback]); 
    5  //callback可选。show函数执行完之后,要执行的函数

    例子:

    $("element").show("slow");     //元素将在600毫秒内慢慢地显示出来
    $("element").show("normal");   //元素将在400毫秒内慢慢地显示出来
    $("element").show("fast");     //元素将在200毫秒内慢慢地显示出来
    $("element").hide("1000");     //元素将在1000毫秒(1秒)内慢慢地隐藏

    二。改变元素的透明度

    fadeIn( )fadeOut( )可以通过改变元素的透明度实现淡入淡出效果

    $(selector).fadeIn([speed],[callback]);
    //speed可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast
    
    $(selector).fadeOut([speed],[callback]);
    //callback可选。fadeIn函数执行完之后,要执行的函数

    例子:

    $("#panel h5.head").toggle(function(){
         $(this).next("div.content").fadeOut();
    },function(){
         $(this).next("div.content").fadeIn();
    });

    三。改变元素的高度

    slideDown( )可以使元素逐步延伸显示
    slideUp( )则使元素逐步缩短直至隐藏

    $(document).ready(function() {
           $("h2").click(function(){
             $(".txt").slideUp("slow");
             $(".txt").slideDown("slow");
           });
     });

    例子:

    $("#panel h5.head").toggle(function(){
         $(this).next("div.content").slideUp();
    },function(){
         $(this).next("div.content").slideDown();
    });

    四。自定义动画

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

    (1)params: 一个包含样式属性及值的映射,比如{property1: "value1", property2: "value2", ····· }
    (2)speed    : 速度参数,可选。
    (3)callback:在动画完成时执行的函数,可选。

    例子:

    点击<div>时,会缓慢的移动

    <head>
    <style>
    #panel{
    position:relative;
    100px;
    height:100px;
    border:1px solid #0050D0;
    }
    </style>
    </head>
    <div id="panel">click me</div>
    <script>
    $(function(){
    $("#panel").click(function(){
    $(this).animate({left:"500px"},3000);
    });
    });
    </script>

  • 相关阅读:
    CSS选择器及优先级
    iframe中跨域页面访问parent的方法
    网页外链用了 target=_blank,结果悲剧了
    CarbonData:大数据融合数仓新一代引擎
    补习系列(14)-springboot redis 整合-数据读写
    python读写配置文件使用总结与避坑指南
    【云速建站】后台配置邮费
    解析:区块链的本质是伴随信息社会产生的一种新型生产关系
    用“黑科技”产放心粮,种地竟然和想象中有点不一样
    【云速建站】按照给定模板从0开始编辑网站页面
  • 原文地址:https://www.cnblogs.com/304979850w/p/13215285.html
Copyright © 2011-2022 走看看