jquery小动画（jquery如何设计一个div出现动画，掉下来弹动两下之后停止）
本文目录
jquery如何设计一个div出现动画，掉下来弹动两下之后停止
$("#按钮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"》
$(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中如何终止动画
可以直接使用stop()函数来立即停止当前正在进行的动画，这样做的目的在于防止前一个动画影响后面动画的效果
在jQuery中可以通过stop()方法来终止动画。它一般用于两个动画间的切换。因为有时鼠标滑动的过快会导致动画效果与鼠标的动作不一致，这时就需要stop（）来停止动画。接下来在文章中将通过具体实例告诉大家如何使用stop方法
【推荐课程：jQuery教程】
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画等
它有两个参数为 stopAll、 goToEnd
stopAll表示是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行
goToEnd 表示是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画
《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
***隐藏网址***
《/script》
《script》
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
《/script》
《style type="text/css"》
#stop{
margin-bottom:10px;
}
#panel,#flip
{ width:200px;
padding:5px;
text-align:center;
background-color:pink;
border:solid 1px #ccc;
}
#panel
{
display:none;
}
《/style》
《/head》
《body》
《button id="stop"》停止滑动《/button》
《div id="flip"》点击向下滑动《/div》
《div id="panel"》停止动画《/div》
《/body》
《/html》效果图：
总结：
更多文章：
entertainment系列（全球一线游戏制作公司有哪些）
2025年9月21日 01:00
下拉框选择怎么设置多个内容（Excel数据有效性设置的下拉菜单内容有多个，但选择时只能单选，如何设置下拉菜单，可以在选择时多选）
2025年7月29日 03:15
2026年8月9日 12:00
find命令排除目录（如何用find命令只查找到文件，但不包括目录）
2026年2月25日 16:15
坐卧铺换票卡是什么意思（火车上，卧铺的车票为什么要换牌有什么作用）
2025年10月31日 08:45
2025年8月7日 04:15
microchip英文介绍（帮忙翻译，要求使用被动语态，谢谢啊）
2026年9月3日 12:00
2025年12月27日 13:15
2026年3月12日 01:45
2026年9月14日 06:00
网页游戏小小忍者游戏单机版，有源代码的详细说下怎么弄（本人菜鸟）？求网页游戏《倾城》服务端和客户端源码
2026年7月11日 08:45
2026年9月3日 18:15
2026年3月3日 03:00
java颜色代码表（Cult3D 高级教程之改变材质颜色的java代码）
2025年7月27日 00:00
C#如何将UTF8的编码转回汉字？各位大神这个编码怎么转换成汉字，必须
2025年7月30日 12:30
502 bad gateway nginx是什么意思（电脑出现502bad gateway怎么解决）
2026年3月7日 02:30
2026年9月18日 22:00
2025年6月16日 10:00
2026年8月4日 03:45
gridview更新编辑（C#后台动态生成的gridview怎么加入 编辑 更新 取消）
2026年5月30日 05:15
