JQuery笔记(四)-动画和特效

   在JQuery中，内置了一些动画和特效，我们可以通过使用这些方法，方便快捷的为我们的页面增加用户体验感

 

1.元素的显示和隐藏

  $(".box").hide() 和$(".box").show() 在这里，我们可以向show和hide方法里传整数，来控制显示和隐藏动作的快慢，单位是毫秒。

  另外，JQuery提供了一个方便的函数 toggle，它可以在显示和隐藏之间切换，比如当前元素为隐藏状态，那么调用toggle就可以显示这个元素，

  如果当前元素为显示状态，那么调用toggle就可以显示这个元素，同样也可以传入整数控制动作的时间。

  然而，JQuery认为仅仅如此还不够，还一并提供了很多相关的增强效果的函数，比如：slide和fade。 slide表示在元素显示和消失的时候加入滑入  和滑出的效果，例如 : $(".box").slideToggle("slow") 表示用滑入和滑出的动画特效来显示和隐藏元素，并且速度为slow；fade表示在显示和隐藏 元素的时候加入渐隐渐出的特效。例如： $box.fadeOut('slow');$box.fadeIn('slow');还有更方便的$('.box').fadeTo('slow', 'toggle');

 

 而且JQuery还提供了更加灵活的animate方法，可以将每种style的改变都加入动画特效，例如

 $('.main').animate({opacity : 'toggle',height: 'toggle',}, 'slow');

 

2.动画的顺序执行

 

   手动确定动画执行顺序

 

   $('#animate').click(function () {
                 $boxes.eq(0).fadeIn('slow', function () {
                          $boxes.eq(1).slideDown('slow');
                 });
   });

 

   自动决定动画顺序

   $(document).ready(function () {
            var $boxes = $('.box').hide(),
            div = 0;
             $('#animate').click(function () {
                   $($boxes[div++] || []).fadeIn('slow', arguments.callee);
             });
    });

 

3.确定元素是否在执行动画

   $('.box').filter(':not(:animated)')

 

4.停止和执行新的动画

   $(document).ready(function () {
          $('#animate').hover(function () {
                   $('.box').stop().fadeTo(200, 1);
                  }, function () {
                         $('.box').stop().fadeTo(200, 0);
                     });
    });

 

简单的动画使用上面的函数就可以了，如果需要的特效更加复杂，那么不妨去JQuery的plugin里去找找吧，可能会有合适的插件哦