首页 > JS应用 > JQuery学习记录(八):jquery自带的已定义动画函数

JQuery学习记录(八):jquery自带的已定义动画函数

作者: 分类:JS应用 点击: 2,573 次

    我们的网页如果一直是那种静态不动的,就显得有点太安静了。所以,我们一般会在页面上添加一些动画动态效果,让页面更加的丰富,如:选项卡、幻灯片、轮播图等等,这些动画我们都可以通过jquery代码来实现的。其实,jquery也自带了一些简单的动画函数供我们使用。

    一、jquery的【显示、隐藏、切换】的动画函数

    1、方法 show()显示、hide()隐藏、toggle()显示隐藏切换

    这3个动画方法有2个参数:速度 与 回调函数

    2、速度参数:

    速度参数可以是:数值、slow(600ms)、normal(400ms)默认、fast(200ms)。

    如:

    $("div").show(200);

    $("div").show('fast');
    表示div元素在200后显示

    3、回调函数:

    实名回调函数,函数名调用自身

    $('.show').click(function () {
    $('div').first().show('fast', function showSpan() {
    $(this).next().show('fast', showSpan);
    });
    });

    匿名函数自调用.使用 arguments.callee 匿名函数自调用

    $('.hide').click(function () {
    $('div').last().hide('fast', function() {
    $(this).prev().hide('fast', arguments.callee);
    });
    });

    二、jquery【向下滑动、向上卷动、切换】动画函数

    向下滑动:slideDown()、
    向上卷动:slideUp()、
    切换向下滑动与向上卷动:slideToggle()

    这3个方法的参数跟show()是一样的。使用方法也是一样的。

    三、jquery【淡入、淡出、切换】动画函数

    淡入:fadeIn() 【从透明到不透明】
    淡出:fadeOut()【从不透明到透明】
    切换淡入与淡出:fadeToggle()

    还有一个比较特加的淡入淡出函数:fadeTo()

    fadeTo()方法:可以实现一个元素淡入淡出渐变到一个指定的透明度的值。它可以有3个参数:

    fadeTo(速度, 指定的不透明值, 回调函数);

    实例1:

    $("p").fadeTo("slow", 0.66);
    用600毫秒缓慢的将p段落的透明度调整到0.66,大约2/3的可见度。

    实例2:带回调函数

    $("p").fadeTo("fast", 0.25, function(){
    alert("200毫秒透明度渐变到0.25,我1/4透明度,然后调用回调函数");
    });



文章作者:ssmay
本文地址:http://wanlimm.com/77201808056447.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:

或许你会感兴趣的文章:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.