当前位置：首页 > 资讯 >

jQuery从入门到熟练(22)

2023-04-24 来源:飞速影视

事件相关处理停止事件冒泡: event.stopPropagation()阻止事件的默认行为: event.preventDefault()

6、动画效果

在一定的时间内, 不断改变元素样式
(1) 滑动动画（不断改变元素的高度来实现的）
slideDown()：带动画的展开slideUp()：带动画的收缩slideToggle()：带动画的切换展开/收缩
<style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background: red; }</style><body><button>慢慢收缩</button><button>慢慢展开</button><button>收缩/展开切换</button><div class="div1"></div><script src="js/jquery-1.10.1.js" type="text/javascript"></script><script type="text/javascript"> /* 需求：
1. 点击btn1, 向上滑动 2. 点击btn2, 向下滑动 3. 点击btn3, 向上/向下切换 */ var $div1 = $(".div1") // 1. 点击btn1, 向上滑动 $("#btn1").click(function () { $div1.slideUp(3000) }) // 2. 点击btn2, 向下滑动 $("#btn2").click(function () { $div1.slideDown() }) // 3. 点击btn3, 向上/向下切换 $("#btn3").click(function () { $div1.slideToggle() })</script>
(2) 淡入淡出动画（不断改变元素的透明度来实现的）
fadeIn()：带动画的显示fadeOut()：带动画隐藏fadeToggle()：带动画切换显示/隐藏

1 ...20 21 22 23 24 ...33 查看全文

jQuery从入门到熟练(22)

6、动画效果

石榴熟了之一拍到底

从宫本到你

从民工到明星

从爱情到幸福

从零到一的爱情

入地无门

破门而入

嫁入豪门