zoukankan      html  css  js  c++  java
  • jQuery中的动画

    show()方法和hide()方法

    show()方法和hide()方法是jQuery中最基本的动画方法,在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为“none”

    当把元素隐藏以后,可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline"或其他除了"none"之外的值)

    fadeIn()方法和fadeOut()方法

    与show()方法不相同的是,fadeIn()方法和fadeOut()方法只改变元素的透明度,fadeIn()方法会在指定的一段时间内降低元素的不透明度,直至元素完全消失,fadeOut()方法则相反。

    slideUp()方法和slideDown()方法

    slideUp()方法和slideDown()方法只会改变元素的高度。

    自定义动画方法animate()

    show()方法和hide()方法会同时修改元素的多个样式属性,即高度、宽度和不透明度。

    在使用animate()方法之前,为了能影响该元素的“top”、“left”、“buttom”和“right”样式属性,必须先把元素的position样式设置为“relative”或者“absolute”

    动画的回调函数:

    css()方法并不会加入到动画队列中,而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数中即可。

    callback回调函数适用于jQuery所有的动画效果方法,例如slideDown()方法的回调函数:

     

    停止动画和判断是否处于动画状态

    停止元素的动画:stop()方法

    stop()方法的语法结构为:stop([clearQueue],[gotoEnd]);

    参数clearQueue和gotoEnd都是可选的参数,为Boolean值(true或者false)。clearQueue代表是否要清空未执行完的动画队列gotoEnd代表是否直接将正在执行的动画跳转到末状态

    如果使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。

    stop()方法会结束当前正在进行的动画,并立即执行队列中的下一个动画。

    判断元素是否处于动画状态:

    在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时,就会出现动画积累。解决方法是判断元素是否正处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。

     延迟动画:在动画执行的过程中,如果想对动画进行延迟操作,那么可以使用delay()方法

    delay()方法允许我们将队列中的函数延时执行

    其他动画方法

    ①toggle()方法

    toggle()方法可以切换元素的可见状态。如果元素是可见的,则切换为隐藏的,如果元素是隐藏的,则切换为可见的。

    单击“标题”链接后,“内容”会在可见和隐藏两种状态之间切换。

    ②slideToggle()方法:slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。

    单击“标题”链接后,“内容”会在可见和隐藏两种状态之间切换,不过是通过改变元素的高度来实现的。

    ③fadeTo()方法:fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值,这个动画只调整元素的不透明度,即匹配的元素的高度和宽度不会发生变化。

    ④fadeToggle()方法:fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。

    动画方法概括

    动画队列:

    ①一组元素上的动画效果

    (1)当在一个animate()方法中应用多个属性时,动画是同时发生的。

    (2)当以链式的写法应用动画方法时,动画是按照顺序发生的(除非queue选项值false)。

    ②多组元素上的动画效果

    (1)默认情况下,动画都是同时发生的。

    (2)当以回调的形式应用动画方式时(包括动画的回调函数和queue()方法的回调函数),动画是按照回调顺序发生的。

    css()方法要使非动画方法也按照顺序执行,需要把这些方法写在动画方法的回调函数中或者queue()方法中。

  • 相关阅读:
    20150316--TP-01
    20150314--TP-02
    20150314--TP-01
    20150313+微信-全
    表单/iframe与video标签
    图像/超链接标签
    HTML列表与表格
    JAVA新的一天
    MySQL常用函数
    php基础--来自网页转载
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/6715566.html
Copyright © 2011-2022 走看看