jQuery中的动画

Posted 2022-05-29 nzcblogs

一、jQuery对象样式相关方法
1、设置高度和宽度
height([num])    【获取或设置样式属性height的值】
获取匹配元素中第一个元素的height样式值或给匹配所有元素设置height样式值


width([num])        【获取或设置样式属性width的值】
获取或设置匹配元素中第一个元素的width样式值

说明：
a、参数
无参：获取匹配元素中第一个元素相应的属性值
有参num：设置所有匹配元素相应属性值为num,并返回匹配元素组成的jQuery类数组对象
b、height()、width()获取和设置属性值与css(attr,[val])获取和设置值不同之处在于：
    它们获取的值为样式属性的数值【不带单位的数字】,而css()获到的值则为带有单位的字符串的值

2、获取或设置内部高度和宽度
innerHeight([num])    【获取或设置内部高度】
获取匹配元素中第一个元素内部高度【包括padding,但不包括border】或给匹配所有元素设置内部高度


innerWidth(num)    【获取或设置内部宽度】
获取匹配元素中第一个元素内部宽度【包括padding,但不包括border】或给匹配所有元素设置内部宽度

说明：
a、参数
无参：获取匹配元素中第一个元素相应的属性值
有参num：设置所有匹配元素相应属性值为num,并返回匹配元素组成的jQuery类数组对象
b、不适用于window和document对象,对于这些对象可以使用height()和width()来代替

3、获取或设置区域高度和宽度
说明：
使用规则和innerHeight()、innerWidth()一样,不同的是他们获取的宽高是：margin+border+padding+内容宽高
outerHeight()    【获取或设置区域高度】

outerWidth()    【获取或设置区域宽度】

4、获取或设置元素位置信息
offset()
获取匹配元素中的第一个元素的当前坐标或设置每一个匹配元素的坐标【坐标相对于文档】

position()
获取匹配元素中的第一个元素的位置偏移量或设置每一个匹配元素的位置偏移量【相对于父元素的偏移位置】

5、获取或设置滚动条位置
scrollLeft()    【获取或设置水平滚动条的位置】
获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条位置。

scrollTop()        【获取或设置垂直滚动条的位置】
获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。

offsetParent()    【获取最近的定位祖先元素】
获取离指定元素最近的含有定位信息的祖先元素

二、jQuery显示与隐藏相关方法
下面相关方法的参数说明：
duration：执行相关操作的持续时间【毫秒】
function：操作完成后执行的回调函数

1、对display属性设置的显示和隐藏方法【隐藏后元素不占据空间】
hide([duration],[function])        隐藏

show([duration],[function])        显示

toggle([duration],[function])    显示与隐藏相互切换
toggle(boolean)        boolean:true 显示元素; false 隐藏元素

2、对opacity属性设置的显示和隐藏方法【隐藏后元素占据空间】
fadeIn([duration],[function])    淡入【显示】

fadeOut([duration],[function])    淡出【隐藏】

fadeTo(duration,opacity,[function])    透明度淡入到多少【改变元素透明度】

fadeToggle([duration],[function])    淡入淡出相互切换【显示与隐藏相互切换】

3、对height属性设置的显示和隐藏方法【隐藏后元素不占据空间】
slideDown([duration],[function])        下滑【显示】

slideUp([duration],[function])        上滑【隐藏】

slideToggle([duration],[function])    上下滑相互切换【显示与隐藏相互切换】

三、自定义动画效果
animate(obj,[duration],[complete])
obj：元素需要变化的属性与属性值组成的键值对集合对象
eg：

    //点击button按钮将div的width设为300px,margin-top设为100px,持续时间为2000毫秒
    $(‘button‘).click(function()
        $(‘div‘).animate(
            width:‘300px‘,
            marginTop:‘100px‘
        ,2000);
    );

stop([stopAll],[goToEnd])    停止当前动画的执行
参数：
a、stopAll 参数规定是否应该清除动画队列,【默认为false】即仅停止当前活动的动画,允许任何排入队列的动画向后执行
b、goToEnd 参数规定是否立即完成当前动画 【默认是 false】
eg：

    //点击button按钮后再动画未执行完再次点击button按钮则会停止当前动画立即执行下一次动画
    $(‘button‘).on(‘click‘, function()
        $(‘.first‘).stop().slideToggle(2000);
    );

finish()    所有动画的CSS属性跳转到他们的最终值

queue([queueName])    获取匹配元素上的已经执行的函数列队
参数：
queueName:一个含有队列名的字符串。默认是fx，标准的动画队列

clearQueue()    从列队中移除所有未执行的项【类似于stop(true)】

拓展：
queue([queueName])、clearQueue()相关详细解释说明可以查看菜鸟教程：https://www.runoob.com/jquery/eff-queue.html

delay()    延迟一段时间在执行后面的方法【只有队列中连续的事件会延迟   即:需要带有持续时间参数的动画】
eg：

    //div1,div2同时滑上，div1延迟2000毫秒再淡入
    $("button").click(function() 
        $("div.first").slideUp(3000).delay(2000).fadeIn(4000);
        $("div.second").slideUp(3000).fadeIn(4000);
    );