jquery如何设计一个div出现动画，掉下来弹动两下之后停止
用jquery设计一个动画，一个div首先是display:none;点击一个button之后，div从上面掉下来，到指定位置之后弹几下，之后停下（和ppt的一种出现方式...
用jquery设计一个动画，一个div首先是display:none;点击一个button之后，div从上面掉下来，到指定位置之后弹几下，之后停下（和ppt的一种出现方式是一样的，弹几下稳定下来）。求具体代码演示啊！
展开
5个回答
展开全部
$("#按钮id").click(function(){
$("#Divid").slideDown("毫秒数");//对display:none才有效，向下弹出，还有slideUp()相反
});
基本的显示。
让其到指定位置，
$(“#divID”).css({left:"1px",top:"1px"})
$(“#divID”).animate();//可以实现动画效果。自定义，不太清楚弹几下。。什么意思，但是基本上是这个意思。
追问：
可以用animate设置向上弹50px之后掉下，再向上弹50px掉下之后稳定吗？可以的话，给个实例啊。麻烦了。。。
追答：
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(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>
<input id="btn1" type="button" value="点我就动了" />
<div id="div1" style="width: 300px; height: 300px; position: absolute; top: 50px;
left: 50px; background-color: Red; display: none;">
点我停止动画
</div>
</body>
</html>
$("#Divid").slideDown("毫秒数");//对display:none才有效，向下弹出，还有slideUp()相反
});
基本的显示。
让其到指定位置，
$(“#divID”).css({left:"1px",top:"1px"})
$(“#divID”).animate();//可以实现动画效果。自定义，不太清楚弹几下。。什么意思，但是基本上是这个意思。
追问：
可以用animate设置向上弹50px之后掉下，再向上弹50px掉下之后稳定吗？可以的话，给个实例啊。麻烦了。。。
追答：
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(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>
<input id="btn1" type="button" value="点我就动了" />
<div id="div1" style="width: 300px; height: 300px; position: absolute; top: 50px;
left: 50px; background-color: Red; display: none;">
点我停止动画
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jQuery实现一连串的连续动画效果，将这些动画运用先设置好，然后在jQuery的作用下完成一个接一个的动画，这在网页游戏编写中是个基础但重要的动画生成技巧，对于前台设计来说也是有必要掌握的。你需要逐步学习jquery动画效果
追问
能不能给个演示？以前没搞过jquery的开发，一上手希望有些参考的。。。
追答
给你个url，自己看看吧
http://www.codefans.net/jscss/code/3451.shtml
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$("#按钮id").click(function(){
$("#Divid").slideDown("毫秒数");//对display:none才有效，向下弹出，还有slideUp()相反
});
基本的显示。
让其到指定位置，
$(“#divID”).css({left:"1px",top:"1px"})
$(“#divID”).animate();//可以实现动画效果。自定义，不太清楚弹几下。。什么意思，但是基本上是这个意思。
$("#Divid").slideDown("毫秒数");//对display:none才有效，向下弹出，还有slideUp()相反
});
基本的显示。
让其到指定位置，
$(“#divID”).css({left:"1px",top:"1px"})
$(“#divID”).animate();//可以实现动画效果。自定义，不太清楚弹几下。。什么意思，但是基本上是这个意思。
追问
可以用animate设置向上弹50px之后掉下，再向上弹50px掉下之后稳定吗？可以的话，给个实例啊。麻烦了。。。
追答
$(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
});
});
});
点我停止动画
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jqueryui弄的, 不知道是不是你想要的, 引用了在线的jquery
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
完善我的回答
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
