jQuery粗略源码解析8 样式操作和动画

1 样式操作

1.1 css和位置

• css() 设置样式
• offset() 获取或者设置相对于当前视口的偏移
• position() 获取相对于父元素的偏移
• scrollTop() scrollLeft() 获取或设置该元素的滚动条上的偏移

<div class="par">haha
    <div class="item">子项</div>
</div>
<script src="../jquery-1.7.1.js"></script>
<script>
    $(".par")
        .css({background: "red", color: "white",display:"inline-block"})
        .offset({top: 100, left: 300});
    console.log($(".item").position());//{top: 100, left: 100}
</script>

<button>返回首页</button>
<script src="../jquery-1.7.1.js"></script>
<script>
    $("button").click(function () {
        $(":root").animate({scrollTop:0},300)
    })
</script>

1.2 尺寸

• widh height：内容区宽高
• innerWidth innerHeight:包括padding的宽高
• outerWidth outerHeight:包括padding和border的宽高

<style>
    div{
        width: 100px;
        height: 100px;
        padding: 50px;
        border: 30px solid grey;
        margin: 80px;
    }
</style>
<div></div>
<script src="../jquery-1.7.1.js"></script>
<script>
    console.log($("div").width());//100
    console.log($("div").innerWidth());//200
    console.log($("div").outerWidth());//260
</script>

2 动画

2.1 核心方法

• params,[speed],[easing],[fn]
  params:一组包含作为动画属性和终值的样式属性和及其值的集合，如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
  speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
  easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
  fn:在动画完成时执行的函数，每个元素执行一次。
• stop() 停止所有在指定元素上正在运行的动画。queue:用来停止动画的队列名称
  clearQueue:如果设置成true，则清空队列。可以立即结束动画。
  jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
• delay() 动画延迟执行

<div>hahah</div>
<button>点击</button>
<script src="../jquery-1.7.1.js"></script>
<script>
    $("button").click(function () {
        $("div")
            .stop(true,true)
            .delay(1000)
            .animate({height:"toggle",width:"toggle"},1000,"swing")
    });
</script>

2.2 显示隐藏

• show()
• hide()
• toggle()

2.3 渐显渐隐

• fadeIn()
• fadeOut()
• fadeTo()
• fadeToggle()

2.3 滑入滑出

• slideDown()
• slideUp()
• slideToggle()