zoukankan      html  css  js  c++  java
  • 上卷下拉效果 (jQuery)

    1jQuery中下拉动画slideDown

    对于隐藏的元素,在将其显示出来的过程中,可以对其进行一些变化的动画效果。之前学过了show方法,show方法在显示的过程中也可以有动画,但是.show()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作。这里将要学习一个新的显示方法slideDown方法

    .slideDown():用滑动动画显示一个匹配元素

    .slideDown()方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式

    常见的操作,提供一个动画是时间,然后传递一个回调,用于知道动画是什么时候结束

    .slideDown( [duration ] [, complete ] )

    持续时间(duration)是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400 毫秒的延时。

    具体使用:

    $("ele").slideDown(1000, function() {
        //等待动画执行1秒后,执行别的动作....
    });

    注意事项:

    • 下拉动画是从无到有,所以一开始元素是需要先隐藏起来的,可以设置display:none
    • 如 果提供回调函数参数,callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数,但是 this会设成将要执行动画的那个DOM元素,如果多个元素一起做动画效果,那么要非常注意,回调函数会在每一个元素执行完动画后都执行一次,而不是这组 动画整体才执行一次

    2jQuery中上卷动画slideUp

    对于显示的元素,在将其隐藏的过程中,可以对其进行一些变化的动画效果。之前学过了hide方法,hide方法在显示的过程中也可以有动画,但 是.hide()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作。这里将要学习一个新的显示方法slideUp方法

    最简单的使用:不带参数

    $("elem").slideUp();

    这个使用的含义就是:找到元素的高度,然后采用一个下滑动画让元素一直滑到隐藏,当高度为0的时候,也就是不可见的时,修改元素display 样式属性被设置为none。这样就能确保这个元素不会影响页面布局了

    带参数:

    .slideUp( [duration ] [, easing ] [, complete ] ) 

    同样可以提供一个时间,然后可以使用一种过渡使用哪种缓动函数,jQuery默认就2种,可以通过下载插件支持。最后一个动画结束的回调方法。

    因为动画是异步的,所以要在动画之后执行某些操作就必须要写到回调函数里面,这里要特别注意

    3jQuery中上卷下拉切换slideToggle

    slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换,jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素

    基本的操作:slideToggle();

    这是最基本的操作,获取元素的高度,使这个元素的高度发生改变,从而让元素里的内容往下或往上滑。

    提供参数:.slideToggle( [duration ] ,[ complete ] )

    同样的提供了时间、还有动画结束的回调。在参数对应的时间内,元素会完成动画,然后出发回调函数

    同时也提供了时间的快速定义,字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时

    slideToggle("fast") 
    slideToggle("slow") 

    注意:

    • display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值
    • 当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局
  • 相关阅读:
    poj 3528 (三维几何求凸包+凸包表面积)
    dijkstra模板(好像是斐波那契额堆优化,但我为什么看起来像优先队列优化,和spfa一样)
    最大空凸包模板
    ICPC 2017–2018, NEERC, Northern Subregional Contest St Petersburg, November 4, 2017 I题
    hdu 5248 序列变换
    hdu 2063(二分图模板测试)
    组合数
    85. Maximal Rectangle 由1拼出的最大矩形
    750. Number Of Corner Rectangles四周是点的矩形个数
    801. Minimum Swaps To Make Sequences Increasing 为使两个数组严格递增,所需要的最小交换次数
  • 原文地址:https://www.cnblogs.com/jiajia-16/p/6160856.html
Copyright © 2011-2022 走看看