菜单

前端基础-jQuery的卡通效果

2019年5月13日 - 皇家前端
  1.  隐藏
  2.  显示
  3.  切换
  4.  下拉
  5.  上卷
  6.  显示

3、jQuery中展示与隐藏切换toggle方法

show与hide是一对互斥的主意。要求对成分进行呈现隐藏的排外切换,经常情状是急需先判别成分的display状态,然后调用其对应的管理办法。

比方显示的因素,那么将要调用hide,反之亦然。
对于如此的操作行为,jQuery提供了一个方便措施toggle用于切换展现或隐藏相配成分

中央的操作:toggle();

那是最中央的操作,管理成分展现恐怕隐藏,因为不带参数,所以没有动画。通过转移CSS的display属性,相称的成分将被立时呈现或隐蔽,未有动画。

display属性将被储存并且需求的时候可以过来。如果3个要素的display值为inline,然后是隐匿和出示,这一个因素将另行展现inline

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

同一的提供了光阴、还有动画甘休的回调。在参数对应的时光内,成分会生出展现/隐藏的转移,在更动的进程中会把成分的高、宽、不光滑度举办一名目繁多动画效果。

以此成分其实正是show与hide的措施

直白定位:.toggle(display)

直接提供2个参数,钦赐要转移的要素的末梢效果

实际上便是鲜明是利用show依然hide方法

if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}

2、jQuery中显示存分的show方法

css中有display:none属性,同时也会有display:block,所以jQuery同样提供了与hide相反的show方法

措施的选择差不多与hide是壹律的,hide是让要素彰显到隐蔽,show则是相反,让要素从隐身到展现

看1段代码:使用上同1,结果相反

$('elem').hide(3000).show(3000)

让要素试行3秒的藏身动画,然后施行3秒的展现动画。

show与hide方法是相当常用的,但是一般很少会依据那二天天性试行动画,很多情形下依然一向操作成分的来得与隐藏为主

注意事项:

5、jQuery中上卷动画slideUp

对于突显的要素,在将其藏匿的进度中,能够对其开始展览局地变通的卡通片效果。从前学过了hide方法,hide方法在体现的过程中也得以有动画,

不过.hide()方法将为相称成分的拉长率,中度,以及不光滑度,同时实行动画操作。这里将在学习三个新的来得情势slideUp方法

最轻巧易行的选拔:不带参数

$("elem").slideUp();

其一利用的意思正是:找到成分的万丈,然后使用二个降低动画让要素一贯滑到隐藏,个中度为0的时候,也正是不可知的时,修改元素display
样式属性被设置为none。

诸如此类就能够确定保障那些成分不会潜移默化页面布局了

带参数:

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

同等能够提供四个日子,然后能够选取一种过渡使用哪一种缓动函数,jQuery默许就2种,能够透过下载插件支持。最终一个动画结束的回调方法。

因为动画是异步的,所以要在动画之后试行某个操作就不可能不要写到回调函数里面,这里要极度注意

1、jQuery中隐藏成分的hide方法

让页面上的要素不可知,一般能够通过设置css的display为none属性。但是经过css直接修改是静态的布局,即使在代码实践的时候,

貌似是经过js调节成分的style属性,这里jQuery提供了1个快捷的方法.hide()来到达那一个功用

$elem.hide()

提供参数:

.hide( options )

当提供hide方法一个参数时,.hide()就能够形成二个卡通方法。.hide()方法将会相配成分的增长幅度,高度,以及不折射率,同时打开动画操作

急迅参数:

.hide("fast / slow")

那是2个卡通设置的快捷格局,’fast’ 和 ‘slow’
分别代表200和600皮秒的延时,就是因素会实行200/600纳秒的卡通片后再隐蔽

注意:

jQuery在做hide操作的时候,是会保留自个儿的要素的原始属性值,再然后通过相应的法门还原的时候还是初始值。

举个例子一个因素的display属性值为inline,那么隐藏再展现时,那么些成分将再也突显inline。

设若折射率到达0,display样式属性将被安装为none,这一个成分将不再在页面中国电影响布局

肆、jQuery中下拉动画slideDown

对于隐藏的要素,在将其出示出来的历程中,能够对其打开部分变动的动画片效果。从前学过了show方法,show方法在展现的经过中也得以有动画,

而是.show()方法将会匹配成分的宽窄,高度,以及不折射率,同时举办动画操作。这里将在学习贰个新的来得方式slideDown方法

.slideDown():用滑动动画呈现一个相称成分

.slideDown()方法将给相称成分的万丈的动画,那会促成页面包车型大巴上面部分滑下去,弥补了彰显的不二等秘书技

大规模的操作,提供三个动画是岁月,然后传递3个回调,用于知道动画是怎么时候截至

.slideDown( [duration ] [, complete ] )

持续时间(duration)是以飞秒为单位的,数值越大,动画越慢,不是越快。字符串
‘fast’ 和 ‘slow’ 分别表示200和600阿秒的延时。

假如提供别的其余字符串,可能这几个duration参数被归纳,那么暗中认可使用400
纳秒的延时。

切切实实行使:

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

注意事项:

阅读目录

6、jQuery中上卷下拉切换slideToggle

slideDown与slideUp是一对相反的措施。要求对成分进行上下拉卷效果的切换,jQuery提供了一个便当方式slideToggle用滑动动画呈现或隐蔽三个相配成分

宗旨的操作:slideToggle();

那是最主旨的操作,获取成分的惊人,使那么些成分的可观发生改造,从而让要素里的开始和结果往下或往上海滑稽剧团。

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

同1的提供了岁月、还有动画甘休的回调。在参数对应的时光内,成分会实现动画,然后起身回调函数

并且也提供了时间的急迅定义,字符串 ‘fast’ 和 ‘slow’
分别表示200和600皮秒的延时

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

注意:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图