jQuery动画相关API

2017-05-25  本文已影响18人  李悦之
1、hover()

这个API接收两个函数,分别对应鼠标移进来和移出去。

<script>
     $('div').hover(function(){
       $(this).css('background','blue')
     },function(){
       $(this).css('background','')
     })
</script>
2、show() 和 hide()
<script>
     $('#div1').hover(function(){
       $('#div2').hide(500)
     },function(){
       $('#div2').show(500)
     })
</script>

需要注意的是,hide()以后不会占位,相应于display:none;这两个API都接收时间参数

3、fadeIn()和fadeOut()和fadeTo()
<script>
     $('#div1').hover(function(){
       $('#div2').fadeOut(1000)
     },function(){
       $('#div2').fadeIn(1000)
     })
</script>

原理和上面的show/hide()差不多,时间默认是400ms。
再就是fadeTo(1000,0.5),和fadeIn/Out()不同,它可以指定具体的透明度,它接收两个参数,一个是时间,另一个是透明度。

4、slideUp()和slideDown()
$('#div1').hover(function(){
       $('#div2').slideUp(1000)
     },function(){
       $('#div2').slideDown(1000)
     })
]</script>
上一篇下一篇

猜你喜欢

热点阅读