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>

  • 相关阅读:
    第14周周总结
    第13周周总结
    栈与队列
    前端继承方式汇总
    实现前端资源增量式更新的一种思路
    link和@import引入外部样式的区别
    webSocket
    Java 下载JDK账号
    穿透
    vue.set方法的使用
  • 原文地址:https://www.cnblogs.com/304979850w/p/13215285.html
Copyright © 2011-2022 走看看