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

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

    作者: 分类:JS应用 点击: 290 次
    wordpress CMS主题:ssmay主题

      我们的网页如果一直是那种静态不动的,就显得有点太安静了。所以,我们一般会在页面上添加一些动画动态效果,让页面更加的丰富,如:选项卡、幻灯片、轮播图等等,这些动画我们都可以通过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透明度,然后调用回调函数");
      });



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

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

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