Jquery中的的简单动画效果

 

Jquery中的的简单动画效果

     主要内容:

1. 显示和隐藏没有动画的元素

2. 利用核心jQuery动画使元素 显示和隐藏

3. 内建效果

最初理解:目前绝大多数网站都以绚丽多彩的界面,吸引用户的眼球,那么这些神奇的效果’我们’,又该如何去一探究竟呢?

之前学习的知识那些单一的效果,都是一闪而过,列如show(),hide(),display:none 等等.这些语法看虽简单,可是怎么简单的东西你会去学习吗?

$("div").hide().addClass("fun");

          <div style="display: none">This will statrt hidden</div>

<div style="display: none" class="fun">This will statrt hidden</div>

<div style="display: none" class="fun">This will statrt hidden</div>

<div>This will start show</div>

结果运行:显示最底下一行,因为在初始时将Style属性的display值设为none 而是元素show()命令后,又而display值总被设为block.

   可折叠列表:

      众所周知计算机的文件分布曾倒树状,不可能一下全部显示在界面上,这样用户…… 所以就有了”渐进式公开”原则

<legend>Collapsible List — Take 1</legend>

      <ul>

        <li>Item 1</li>

        <li>Item 2</li>

        <li>

          Item 3

          <ul>

            <li>Item 3.1</li>

            <li>

              Item 3.2

              <ul>

                <li>Item 3.2.1</li>

                <li>Item 3.2.2</li>

                <li>Item 3.2.3</li>

              </ul>

            </li>

            <li>Item 3.3</li>

          </ul>

        </li>

        <li>

          Item 4

          <ul>

            <li>Item 4.1</li>

            <li>

              Item 4.2

              <ul>

                <li>Item 4.2.1</li>

                <li>Item 4.2.2</li>

              </ul>

            </li>

          </ul>

        </li>

        <li>Item 5</li>

      </ul>

运行如图: 

这样的界面肯定不行,文件过多那该怎么办,考虑折叠

$(function(){

        $('li:has(ul)')

          .click(function(event){

            if (this == event.target) {

              if ($(this).children().is(':hidden')) {

                $(this)

                  .css('list-style-image','url(minus.gif)')

                  .children().show();

              }

              else {

                $(this)

                  .css('list-style-image','url(plus.gif)')

                  .children().hide();

              }

            }

            return false;

          })

          .css('cursor','pointer')

          .click();

        $('li:not(:has(ul))').css({

          cursor: 'default',

          'list-style-image':'none'

        });

      });

 

真正的产生动画效果:toggle(speed,callback),在任何隐藏包装下执行show(),并且在任何非隐藏的包装元素下执行hide(),speed.指定时间callback,动画完成时调用

元素的淡入和淡出,fadeout fadeout(speed,callback) 将非隐藏的任何已匹配的元素的不透明度降低到百分之0 

FadeTo(speed,opacity,callback) Opacity 指定元素调整的目标不透明度

元素的滑上和滑下slideDown()和slideup(),其效果和hide(),show()相似

SlideDown(speed,callback) 通过从上往下逐渐扩大元素的垂直面积,使隐藏的任何已匹配的元素显示出来,不是隐藏的没事.

SlideToggle(speed,callback)在隐藏的任何已包装的元素执行slideDown(),同事在非隐藏的时候执行sildeup(),

动画停止:stop()停止当前正在运行的动画