jQuery动画个人总结

最新推荐文章于 2020-11-04 16:23:25 发布

原创最新推荐文章于 2020-11-04 16:23:25 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #hide #动画

前端专栏收录该内容

40 篇文章

订阅专栏

博客主要介绍了jQuery动画相关内容，包括动画参数speed和callback的含义，详细列举了隐藏/显示、淡入淡出、滑上滑下等动画方法，还提及动画队列和停止动画的方法，最后建议参考菜鸟教程jQuery参考手册下的效果方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery动画

所有参数名speed可以取"slow","fast"或毫秒
所有参数名callback意思为回调函数，在动画结束后，就执行该函数的函数体信息。

1、隐藏/显示

hide(speed,callback); //隐藏
show(speed,callback); //显示
toggle(speed,callback); //切换hide()与show()的效果

2、淡出/淡入

fadeIn(speed,callback); //淡入
fadeOut(speed,callback); //淡出
fadeToggle(speed,callback); //切换fadeIn()与fadeOut()的效果
fadeTo(speed,opacity,callback) //允许渐变为给定的不透明度。opacity参数值介于0与1之间，0最透明。

3、滑动

slideDown(speed,callback); //滑下
slideUp(speed,callback); //滑上
slideToggle(speed,callback); //切换sildeDown()与sildeUp()的效果

4、自定义动画
animate({params},speed,callback);
①：默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的，如需对未知进行操作，要记得首先吧元素的CSS position属性设置为relative、fixed或absolute!

 举例：
 $(function(){
 $("button").click(function(){
 $("div").animate({
   				left:'250px',//向右移动250像素
   				width:'150px',
   				height:'150px'
   				},1000);
   				});
   				});
   				<body>
   				<button>开始动画</button>
   				<p>我是段落</p>
   				<div style="background:green;height:100px;width:100px;position:absolute;"></div>
   				</body>

②animate()方法几乎可以可以操作所有CSS属性，需要记住一件重要的事情：当使用animate()时,必须使用Camel标记法书写所有的属性名，比如，必须使用paddimgLeft，而不是padding-left；使用marginRight，而不是margin-right等等。
③使用相对值 +=

4、动画队列
$(“div”).animate({hight:‘290px’},1000).fadeOut(1000);

5、停止动画
stop(stopAll,goToEnd);
stopAll参数规定是否应该清楚动画队列。默认为false。
goToEnd参数规定是否立即完成当前动画。默认为false。

       举例：
  <script> $(document).ready(function(){ 
   $("#start").click(function(){
		$("div").animate({left:'100px'},5000);
		$("div").animate({fontSize:'3em'},5000);
     });
   $("#stop").click(function(){
		 $("div").stop(); 
    }); 
 	$("#stop2").click(function(){
		 $("div").stop(true);
});
 $("#stop3").click(function(){ 
  $("div").stop(true,true);
   });
   });
   </script>
    </head>
    <body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止动画，但完成动作</button>
    <p>点击 "开始" 按钮开始动画。</p>
    <p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>
    <p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>
    <p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p> 
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

还有一些动画的函数未写。可以参考菜鸟教程jQuery参考手册下的效果方法！