jquery（三：jquery的动画）

动画

一：1.显示

show()

参数：1.代表动画执行的时长，毫秒数，也可以是代表时长的字符串 fast normal slow

	2.代表方法执行完毕的回调函数

默认的是：normal

$(function(){
    $('#div1').show(2000，function(){
        alert('动画执行完毕')
    })
})

一：2.隐藏

hide()

参数：1.代表动画执行的时长，毫秒数，也可以是代表时长的字符串 fast normal slow

	2.代表方法执行完毕的回调函数

默认的是：normal

$(function(){
    $('div1').hide(2000，function(){
        alert('动画执行完毕')
    });
})

一：3.切换

toggle（）

$('#toggle').click(function(){
    $('#div1').toggle(1000);
})

二：1.滑入

slideDown()

参数：1.代表动画执行的时长，毫秒数，也可以是代表时长的字符串 fast normal slow

	2.代表方法执行完毕的回调函数

默认的是：normal 400ms

$(function(){
    $('#slideDown').click(function(){
        $('div1').slideDown(2000,function(){
            alert("滑出");
        });
    })
})

二：2.滑出

slideUp（）

$(function(){
    $('#slideUp').click(function(){
      $('div1').slideUp(2000,function(){
          alert("滑出了")；
      });
    })
})

二：3.切换

slideToggle()

$('#slideToggle').click(function(){
    $('#div1').slideToggle(1000);
})

三：1.淡入

fadeIn()

$(function(){
   $('#fadeIn').click(function(){
       $('#div1').fadeIn(2000,function(){
           alert("淡入")；
       });
   });
})

三：2.淡出

fadeOut（）

$(function(){
   $('#fadeOut').click(function(){
       $('#div1').fadeOut(2000,function(){
           alert("淡出")；
       });
   });
})

三：3.切换

fadeToggle（）

$('#fadeToggle').click(function(){
    $('#div1').fadeToggle(1000);
})

三：4.淡入到哪里

fadeTo()

$(function(){
   $('#fadeTo').click(function(){
       $('#div1').fadeTo(2000,0.5);
   });
})

四：自定义动画

animate()

1.必选的对象，代表的是需要做动画的属性

2.可选的，执行动画的时长

3.可选的，代表的是缓动还是匀速 ----linear(匀速) swing（缓速）默认是swing

4.动画的完毕的回调函数

$(function(){
    $('#lr800').click(function(){
        $('#div1').animate({
            left：800
        }，2000,'linear',function(){
            alert('动画执行完毕')；
        })
    })
})

案例：

360开机动画：

$(function(){
    $('#closeButton').click(function(){
       $('#bottomPart').animate({
           height:0;
       },2000,function(){
           $('#box).animate({
               width:0
           },2000);
       }) ;
    });
})

动画队列与停止动画

1.是否清除队列

2.是否跳转到最终效果

默认不写就是全flase

$(function(){
   $('#start').click(function(){
       $('#div1').slideDown(2000),slideUp(2000);

   }) ;
   $('#stop').click(function(){
       $('div').stop(true,true);
   })
});

offset()和position（）方法

offset();获取距离document的位置

position（）：兑现包含了top和left的值，距离它的定位父级的位置

$(function(){
    $('#buttion').click(function(){
     	$('#son).offset
    });
});

scrollLeft和scrollTop方法

得到的数据是看不见的，卷出去的宽高

设置元素被卷曲出去的宽高

$(function(){
   $('#buttion').click(function(){
       $('#div1').scrollLeft();
   }) ;
});

案例

固定导航栏

$(function(){
   //给页面设置一个滚动事件
   //计算第一部分的高度
     var s2=$('.classtop').height();
   $(window).scroll(function(){
      //获得卷曲的距离
      var s1 =$(window).scrollTop();
      if(s1>=s2){
          //固定定位
          $('.nav').css({
              position:'fixed',
              top:0,
              letf:0
          })
          //设置第三部分的高度为第三部分的margin高度
          var s3 =$('nav2').height();
          $('#main').css({
              position:''static',
              top:0,
              left:0
          })
      }else{
           //固定定位
          $('.nav').css({
              position:'static',
              top:0,
              letf:0
          })
          //设置回原来的值
          $('main').css({
              marginTop:10
          })
      }
   });
});