动画1

来源:互联网 发布:国产汽车发动机知乎 编辑:程序博客网 时间:2024/06/16 15:41

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title></title>

<styletype="text/css">

#div1{

width:100px;

height:100px;

background-color: pink;

}

</style>

<scriptsrc="js/jq/jquery-2.1.3.min.js"type="text/javascript" charset="utf-8"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$(document).click(function() {

// animate方法实现了动画效果,三个参数{param},参数2时间(slow,fast,1000),参数3是回调函数

// $("#div1").animate({

// width: '200px',

// height: '200px',

// fontSize:'30px'

//

//

// },1000)


// 按照先后顺序发生的动画

// $("#div1").animate({"width":"200px"},1000,function(){

// $("#div1").animate({"height":"200px"},1000)

// })

$("#div1").animate({width:"200px"},1000).animate({height:"200px"},1000).animate({opacity:0.3},1000)

})

})

</script>

</head>

<body>

<div id="div1">1111</div>

</body>

</html>

0 0
原创粉丝点击