怎么使用jQuery中的动画？_教程

使用animate函数。

jquery的animate函数可以实现大多数缓动动画，按照文档传递参数就可以。

也可以结合使用css3，切换css的类名实现动画，功能更强大。

$("#按钮id").click(function(){

$("#Divid").slideDown("毫秒数")//对display:none才有效，向下d出，还有slideUp()相反

})

基本的显示。

让其到指定位置，

$(“#divID”).css({left:"1px",top:"1px"})

$(“#divID”).animate()//可以实现动画效果。自定义，不太清楚d几下。。什么意思，但是基本上是这个意思。

追问：

可以用animate设置向上d50px之后掉下，再向上d50px掉下之后稳定吗？可以的话，给个实例啊。麻烦了。。。

追答：

<html>

<head>

$(function () {

$("#btn1").mouseenter(

function () { $("#div1").slideDown(1000) } //slideDown 和slideUp只对display：none有效

).click(function () {

var div1 = $("#div1")//获取jquery对象

var id = setInterval(function () { div1.animate({ top: "+=30" }, 1000).animate({ top: "-=30" }, 1000)}, 2000)/*让图片上下浮动，重复执行

不要链式控制css属性，应在fn。

div1.click(function () {

clearInterval(id)//清除定时器

div1.stop()//停止动画 2参数，1立即停止动画，第二个清除动画列表 bool

})

</script>

</head>

<body>

<div id="div1" style="width: 300pxheight: 300pxposition: absolutetop: 50px

left: 50pxbackground-color: Reddisplay: none">

点我停止动画

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

怎么使用jQuery中的动画？