当前位置：首页 > 资讯 >

jQuery从入门到熟练(24)

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

(4) 自定义动画
animate({结束时的样式}, time, fun)：自定义动画效果的动画stop()：停止动画
<style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 100px; height: 100px; top: 50px; left: 300px; background: red; }</style></head><body><button>逐渐扩大</button><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. 逐渐扩大 1). 宽/高都扩为200px 2). 宽先扩为200px, 高后扩为200px 2. 移动到指定位置 1).移动到(500, 100)处 2).移动到(100, 20)处 3.移动指定的距离 1). 移动距离为(100, 50) 2). 移动距离为(-100, -20) 4. 停止动画 */ var $div1 = $(".div1") /* 1. 逐渐扩大 1). 宽/高都扩为200px 2). 宽先扩为200px, 高后扩为200px */ $("#btn1").click(function () { /* $div1.animate({ width: 200, height: 200 }, 1000) */ $div1 .animate({ width: 200 }, 1000) .animate({ height: 200 }, 1000) }) /* 2. 移动到指定位置 1).移动到(500, 100)处 2).移动到(100, 20)处 */ $("#btn2").click(function () { // 1).移动到(500, 100)处 /* $div1.animate({ // 向右下移动 left: 500, top: 100 }, 1000) */ // 2).移动到(100, 20)处 $div1.animate({ // 向左上移动 left: 100, // 300 top: 20 // 50 }, 1000) }) /* 3.移动指定的距离 1). 移动距离为(100, 50) 2). 移动距离为(-100, -20) */ $("#btn3").click(function () { // 1). 移动距离为(100, 50) /*$div1.animate({ left: " =100", top: " =50" }, 1000)*/ // 2). 移动距离为(-100, -20) $div1.animate({ left: "-=100", top: "-=20" }, 3000) }) $("#btn4").click(function () { $div1.stop() })</script>

1 ...22 23 24 25 26 ...33 查看全文

jQuery从入门到熟练(24)

石榴熟了之一拍到底

从宫本到你

从民工到明星

从爱情到幸福

从零到一的爱情

入地无门

破门而入

嫁入豪门