JQuery的animate中callback函数的使用

最新推荐文章于 2022-07-07 14:59:11 发布
最新推荐文章于 2022-07-07 14:59:11 发布
阅读量3.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Null_RuzZ/article/details/50379994
版权

环境：jquery-1.8.0.js，FireFox Developer45.0a2


回调函数(callback)必须是全局函数或者静态函数，不可定义为某个特定的类的成员函数

callback函数在当前动画100%完成之后执行

典型的语法：

$(selector).hide(speed,callback)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
   //使用回调函数，动画结束后，弹框
  alert("The paragraph is now hidden");
    });
  });
});
/*
<span style=""></span><pre name="code" class="html">$(document).ready(function(){
  $("button").click(function(){
   //未使用回调函数,段落未完全隐藏时就弹出信息
 $("p").hide(1000,alert("The paragraph is now hidden");
    );
  });
});*/
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

 

 

 参考：http://www.jb51.net/article/60581.htm 

 

           http://www.w3school.com.cn/jquery/jquery_callback.asp
 

                

        

        

    




    

      

        

            

              
                
                  Null_RuzZ
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
jQuery的animate中callback函数会立即执行

				
			

			

				

					dragoo1的专栏
				

				

					08-27
					
					3451
					
				

			

		

		

			
				
环境：jQuery v1.11.1，chrome 43.0.2357.132

原代码：
function fadeback(uid) {
    var myDate = new Date();
    $("#dynamicwatch").html($("#dynamicwatch").html() + "" + uid + myDate.getSeconds() + "." + myD

			
		

	



                

              
                



	

		

			

				
					
jquery animate 回调_jQuery 教程/资料05动画、停止动画、Callback和链效果

				
			

			

				

					weixin_39664136的博客
				

				

					11-29
					
					279
					
				

			

		

		

			
				
哈喽，点击上面蓝字关注我吧1、动画 - animate() 方法1.1、用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数...

			
		

	



                


  
              

                


	

		

			

				
					
jQuerty使用animate的callback立刻发生了

				
			

			

				

					weixin_34384681的博客
				

				

					11-05
					
					103
					
				

			

		

		

			
				
在w3School上这这么写的
定义和用法
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},...

			
		

	





	

		

			

				
					
动画animate(params , speed , callback)

				
			

			

				

					LzzMandy的博客
				

				

					09-10
					
					1602
					
				

			

		

		

			
				
animate(params , speed , callback)

1、params：包含样式属性值及值的映射，如{color：“red”，width：“400px”，height：“400px”}

2、speed：速度参数，可选

3、callback：在动画完成时执行的参数，可选

****需要注意的是，为了能让元素动起来，需要把元素的position设置成“relative”或“abs...

			
		

	



		

			
		



	

		

			

				
					
jQuery Callback 方法

				
			

			

				

					eggplant_的博客
				

				

					10-17
					
					221
					
				

			

		

		

			
				
为什么会出现Callback方法？

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，您可以以参数的形式添加 Callback 函数。


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&l...

			
		

	





	

		

			

				
					
jQuery的animate函数学习记录

				
			

			

				

					11-30
				

			

		

		

			
				
在实际使用中，`animate`函数通过`jQuery.fx.prototype.step`中的逻辑来控制动画的执行。它会计算出当前时间与动画开始时间的差值（`n`），然后用这个差值除以动画的总时长，得到动画的进度`p`。这个进度`p`随后传递...

			
		

	





	

		

			

				
					
jQuery动画animate方法使用介绍

				
			

			

				

					10-27
				

			

		

		

			
				
`jQuery` 的 `animate` 方法是用于创建自定义动画的核心函数，它允许开发者精确控制页面元素的动画效果，包括但不限于位置、大小、颜色、透明度等样式属性的变化。`animate` 方法提供了极大的灵活性，使开发者能够...

			
		

	





	

		

			

				
					
jQuery的animate函数实现图文切换动画效果

				
			

			

				

					10-24
				

			

		

		

			
				
jQuery的animate()函数是JavaScript库jQuery中的一个核心方法，它为网页添加了丰富的动态效果，使得页面元素的改变更加平滑、自然。在本例中，我们将探讨如何使用animate()来实现图文切换的动画效果，这在许多网页...

			
		

	





	

		

			

				
					
jquery animate 动画效果使用说明

				
			

			

				

					10-29
				

			

		

		

			
				
jQuery 的 `animate` 函数是用于创建自定义动画效果的重要工具，它允许开发者实现各种复杂的动态效果。`animate` 函数的基本语法是 `animate( params, [duration], [easing], [callback] )`，其中：  1. `params` 是...

			
		

	





	

		

			

				
					
关于jquery中的Callback方法来控制动画和函数执行的先后顺序

				
			

			

				

					qq_42755868的博客
				

				

					03-19
					
					405
					
				

			

		

		

			
				
关于动画和函数执行先后的控制，以下两段代码可以很好的解释，
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});


点击之后先进行动画，后触发函数。

下面这段代码，则是先执行代码，后触发动画
$("button").cl...

			
		

	





	

		

			

				
					
js动画animate缓动效果添加回调函数callback

				
			

			

				

					tuzi007a的博客
				

				

					04-12
					
					838
					
				

			

		

		

			
				
<!DOCTYPE HTML>
<html>
 <head>
  <title>js动画animate缓动效果添加回调函数callback</title>
  <meta charset="utf-8" />
  <style>
   * {
    margin: 0;
    padding: 0;
    }...

			
		

	





	

		

			

				
					
jQuery学习笔记-----------(显示、淡入淡出、滑动、动画、callback、链接)

				
			

			

				

					WEL测试
				

				

					04-17
					
					993
					
				

			

		

		

			
				
关于jQuery学习笔记的参考网站是：http://www.runoob.com/jquery/jquery-tutorial.html


jQuery 效果- 隐藏和显示



通过 jQuery，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
  $("p").hide();
});

			
		

	





	

		

			

				
					
jQuery1.8 ajax 后台执行成功不返回 callback函数不执行

				
			

			

				

					weixin_33805557的博客
				

				

					10-17
					
					350
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
jQuery 来了--动画，停止动画，回调函数Callback，链

				
			

			

				

					panlu666_pl的博客
				

				

					04-30
					
					3304
					
				

			

		

		

			
				
动画



animate()方法

作用：用于创建自定义动画

语法：$(“selector”).animate({params},speed,callback);

参数 params：必需值。定义形成动画的CSS属性

例.



script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div

			
		

	





	

		

			

				
					
JQ动画：animate()方法的学习

				
			

			

				

					weixin_57746257的博客
				

				

					06-28
					
					2681
					
				

			

		

		

			
				
JQ动画：animate()方法的学习

一、第一部分：

我们先设置HTML的结构，我分别使用了两个div以及button按钮，来分别演示animate()方法的不同的功能.





二、第二部分

在写CSS中，我们在写animate()方法时候，要注意：在默认的情况下，所有的HTML元素的位置都是静态的，而且是无法移动的，如果我们要移动它们的位置，我们就要把元素中的CSS结构里的position定位属性设置为relative、fixed 或 absolute.



三、第三部分

Anima...

			
		

	





	

		

			

				
					
jQuery中animate()的方法

				
			

			

				

					weixin_44774699的博客
				

				

					07-07
					
					4630
					
				

			

		

		

			
				
jQuery中animate()的方法


			
		

	





	

		

			

				
					
jquery中的动画效果方法animate()及其回调函数的使用

					
热门推荐

				
			

			

				

					干勾鱼的CSDN博客
				

				

					10-21
					
					2万+
					
				

			

		

		

			
				
转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/52883286 
  本文出自【我是干勾鱼的博客】
有时候我们会使用一些动态效果，比如将div动态边长、缩短之类的，这需要使用jquery中的animate()方法，比如：<html>
<head>
<script type="text/javascript" src="/jquer

			
		

	





	

		

			

				
					
jQuery animate()方法详解、实例、扩展（详细版）

				
			

			

				

					xuxuechao6的博客
				

				

					03-14
					
					1万+
					
				

			

		

		

			
				
jQuery animate()方法详解、实例、扩展（详细版）

　　一、语法

　　先看看官方文档怎么写的。

语法 1

　　$(selector).animate(styles,speed,easing,callback)



参数
描述


styles


　　必需。规定产生动画效果的 CSS 样式和值。

　　可能的 CSS 样式值（提供实例

			
		

	





	

		

			

				
					
JQUERY  animate函数使用

					
最新发布

				
			

			

				

					06-06
				

			

		

		

			
				
animate() 函数是 jQuery 中用于执行 CSS 属性动画的方法。它允许您逐渐改变元素的 CSS 属性值，以创建平滑的动画效果。  下面是 animate() 函数的语法：  ```javascript $(selector).animate({styles},speed,easing...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值