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效果:CSS实用技巧制作三角形以及箭头效果
    JS之this应用详解
    JS之iscroll.js的使用详解
    一个测试人员眼中的创业团队七宗罪
    一个WEB应用的开发流程
    一个年薪一百万的程序员:技术进阶之路
    一个十年IT从业者的职场感言:为什么不要自称是“程序员”
    一位程序员工作10年总结的13个忠告,却让很多人惋惜
    当个好的测试经理不容易,懂得这些很重要
    测试经理岗位职责及应具备的能力
  • 原文地址:https://www.cnblogs.com/304979850w/p/13215285.html
Copyright © 2011-2022 走看看