jQuery动画 (二)

幸运
185
文章
0
评论
三月 10, 202014:07:51 评论 101 1826字阅读6分5秒

前言

学习今天的知识点之前我们简单的回顾一下昨天的内容

  1. jquery自定义动画
  2. 以动画效果显示和隐藏html元素

今天内容

  1. 幻灯片的淡入淡出
  2. 滑动效果显示和隐藏html元素

幻灯片的淡入淡出

关键函数

  • fadeIn([duration] [,easing] [,complete]),参数可选,实现淡入效果
  • fadeOut([duration] [,easing] [,complete]),参数可选,实现淡出效果
  • fadeTo([duration],opacity [,easing] [,complete]),参数可选,可以直接调节HTML元素的透明度
  • fadeToggle([duration],opacity [,easing] [,complete]),淡入淡出切换显示和隐藏HTML元素,参数可选
    如果你还不懂具体参数的含义,请查看上一篇的文章,里面有详细的讲解
    先看一下四种效果吧
    jQuery动画 (二)

    淡入效果

    jQuery动画 (二)

    淡出效果

    jQuery动画 (二)

    直接调节透明度

    jQuery动画 (二)

    切换显示

    布局
<!-- 淡入 -->
<body>
    <input type="button" value="click here" name="clickhere">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</body>

样式

/*淡入*/
    div{
        float:left;
        border: 1px solid black;
        display: none;
        width: 50px;
        height: 50px;
    }
    div#one{
        background: #f00;
    }
    div#two{
        background: #0f0;
    }
    div#three{
        background: #ff0;
    }

jquery
相信大家对css和HTML应该掌握得很好,此处只给出一种效果的css与html作为参考,我们省略另外三种效果的css与HTML,只给出相对应的jquery

<script>
    // 淡入
    $("input[name=clickhere]").click(function(){
        $("div:hidden:first").fadeIn(1000);
    });
</script>
<script>
    // 淡出
    $("input[name=clickhere]").click(function(){
        $("div:visible:first").fadeOut(500);
    });
</script>
<script>
    //调节透明度 
    $("p:first").click(function(){
        $(this).fadeTo("slow",0.5);
    });
</script>
<script>
    // 切换显示
    $("input:first").click(function(){
        $("p:first").fadeToggle("slow","linear");
    });
    $("input:last").click(function(){
        $("p:last").fadeToggle("fast");
    });
</script>

滑动效果

jQuery可以以滑动的效果显示和隐藏HTML元素
关键函数

  • slideDown([duration] [,easing] [,complete]),参数可选,以滑动效果显示HTML元素
  • slideUp([duration] [,easing] [,complete]),参数可选,以滑动效果隐藏HTML元素
  • slideToggle([duration] [,easing] [,complete]),参数可选,以滑动效果显示隐藏HTML元素

其实与淡入淡出的动画效果是类似的,这里我们使用slideToggle()函数演示对应的效果,其他效果请有兴趣的同学自行动手实践。
jquery

<script>
    $("input[name=change]").click(function(){
        $("p").slideToggle("slow");
    });
</script>

jQuery动画 (二)

滑动效果切换显示和隐藏HTML元素

 

本文来源于:jQuery动画 (二)-幸运草博客
特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。

  • 本站QQ群
  • weinxin
  • 捐赠本站
  • weinxin
jquery中cookie用法介绍 jQuery

jquery中cookie用法介绍

cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使用方法。 使用JQuery操作cookie时 发生取的值不正确的问题: ...
jQuery事件:bind、delegate、on的区别 jQuery

jQuery事件:bind、delegate、on的区别

「内容简介」本文详解各种jQuery事件绑定方法:on,bind,delegate,live,unbind,trigger。 同时总结一下常用的jQuery事件技术:如何阻止事件冒泡、阻止浏览器默认行...
jQuery入门讲解-jQuery样式操作 jQuery

jQuery入门讲解-jQuery样式操作

css 操作 通过css()的方法设置或者获取样式,无论样式属性是从外部导入的,还是直接写在HTML标签里面的,css()方法都可以获取到。。 1、设置单个样式: 2、设置多个样式: 操作多个样式的时...
Jquery Notes jQuery

Jquery Notes

1.什么是jQuery 2.如何使用jQuery 3.查找元素 1.什么是jQuery jQuery是第三方开发的执行DOM操作的极简化的函数库 第三方:下载 执行DOM操作:jQuery还是执行DO...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: