jquery动画animate的方法
程序员文章站
2024-03-25 12:12:16
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{width: 100px; height: 100px; background-color: red;}
#div2{width: 100px; height: 100px; background-color: blue;}
</style>
<script src = 'jquery-1.10.1.min.js'></script>
<script>
/*
animate方法 JQ官方的动画函数
参数：
第一个参数：对象，传入要变化的样式和目的值
第二个参数：动画持续时间，如果不传入默认是400毫秒。
第三个参数：回调函数
*/
$(function(){
$("#div1").hover(function(){
// $("#div2").animate({
// width: 300,
// height: "300px",
// opacity: 0.5
// }, 2000, function(){
// $("#div1").html("移入成功");
// })
//先让宽变宽，然后再让高变高，最后透明度变化
$("#div2")
.animate({width: 300}, 2200)
.animate({height: 300}, 1700)
.animate({opacity: 0.5}, 800)
}, function(){
// $("#div2").animate({
// width: 100,
// height: "100px",
// opacity: 1
// }, 2000, function(){
// $("#div1").html("移出成功");
// })
$("#div2")
.animate({opacity: 1}, 2000)
.animate({height: 100}, 1500)
.animate({width: 100}, 1000)
})
})
</script>
</head>
<body>
<div id = 'div1'></div>
<div id = 'div2'></div>
</body>
</html>