jQuery_淡入淡出
淡入淡出:不断改变元素的透明度(opacity)来实现的
1.fadeIn():带动画的显示
2.fadeOut():带动画的隐藏
3.fadeToggle():带动画切换显示/隐藏
滑动动画:不断改变元素的宽度来实现
1.slideDown():带动画的展开
2.slideUp():带动画的收缩
3.slideToggle():带动画的切换展开/收缩
显示隐藏:默认没有动画
(不断改变元素的透明度(opacity)来实现的/不断改变元素的宽度来实现)
1.show():(不)带动画的显示
2.hide():(不)带动画的隐藏
3.toggle():(不)带动画的切换显示/隐藏
自定义动画_练习
jQuery动画本质:在指定时间内不断改变元素样式值来实现的
1.animate():自定义动画效果的动画
2.stop():停止动画
<script type="text/javascript"> /** * 1.逐渐扩大 * 1).宽、高都扩大200px * 2).宽先扩为200px,高后扩为200px * 2.移动到指定位置 * 1)移动到(500,100)处 * 2)移动到(100,20)处 * 3.移动指定的距离 * 1)移动距离为(100,50) * 2)移动距离为(-100,-20) * 4.停止动画 */ $(function () { /* 1.逐渐扩大 * 1).宽、高都扩大200px * 2).宽先扩为200px,高后扩为200px * */ var $div = $('div') $('#btn1').click(function () { $div.animate({ 200, height:200 },1000) }) $('#btn1').click(function () { $div.animate({ 200, },1000).animate({ height:200 },1000) }) /* * 2.移动到指定位置 * 1)移动到(500,100)处 * 2)移动到(100,20)处 * */ $('#btn1').click(function () { $div.animate({ top:500, left:100 },1000) }) $('#btn1').click(function () { $div.animate({ top:100, left:20 },1000) }) /* * 3.移动指定的距离 * 1)移动距离为(100,50) * 2)移动距离为(-100,-20) * */ $('#btn1').click(function () { $div.animate({ top:'+=100', left:'+=20' },1000) }) $('#btn1').click(function () { $div.animate({ top:'-=100', left:'-=20' },1000) }) //4.停止动画 $('#btn1').click(function () { $div.stop() }) }) </script>
二级菜单展开动画:
$('#nav>ul>li:has(ul)').hover(function () { $(this).children('ul').stop().slideDown() },function () { $(this).children('ul').stop().slideUp() })