jQuery效果总结-白红宇

jQuery效果总结

阅读量：7087 次

发布时间：2019-06-28

本文共 4050 字，大约阅读时间需要 13 分钟。

1、

.html	.js
<div class="aa"></div>	$(".aa").
<div id="aa"></div>	$("#aa").

jQuery 隐藏/显示	.hide()	.show()	.toggle()
jQuery 淡入淡出	.fadeIn()	.fadeOut()	.fadeToggle()
jQuery 滑动	.slideDown()	.slideUp()	.slideToggle()

jQuery 动画
多个属性	.animate({left:'250',opacity:'0.5',height:'150px'});
相对	.animate({left:'250px',height:'+=150px'});
使用预定义	.animate({height:'toggle'});
队列功能	.animate({height:'300px',opacity:'0.4'},"slow"); .animate({weight:'300px',opacity:'0.8'},"slow"); .animate({height:'100px',opacity:'0.4'},"slow"); .animate({weight:'100px',opacity:'0.8'},"slow");

jQuery stop()

.stop

jQuery Callback

$("p").hide(1000,function(){

alert("The paragraph is now hidden");

});

jQuery Chaining

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

.html:

      index.html	    
    
         
     
          
      
              	
       	
        	
         
                    
          Hello
    
          Hello
    
          Hello    
          Hello
    
          
           显示    
           
            隐藏    
            
             切换
             
   
             
             
 
              
              
 
               
               
 
               
                    
                
                 点这里，三个正方形可以渐入    
                 
                  点这里，三个正方形可以渐出    
                  
                   点这里，三个正方形渐入渐出切换    
                   
                    渐出至一定的透明度
                    
    
                    
                         好好学习，
                     
    天天向上。
                     
        
                     
                          点击这里，div4滑出。    
                      
    
                      
                           点击这里，div4滑入。    
                       
    
                       
                            点击这里，div4滑出滑入。    
                        
    
                        
                         开始动画
                         
                         
    
                         
                              默认地，所有 HTML 元素都有一个静态位置，且无法移动。
                          
 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
                          
            
                          
                           animate操作多个动画属性
                           
                           
    
                           
                            animate相对动画属性
                            
                            
    
                            
                             animate使用预定义的值
                             
                             
    
                             
                              animate队列功能
                              
                              
    
                              
                              
                              
                              
                              
                              
   
                              
                               animate队列功能   增加文字的字号
                               
                               
    
                               
                                    jQuery        
                                
                                
                                
                                
                                
                                
                                
    
                                
                                 停止滑动    
                                 
                                      div10        点这里，向下滑动        
                                  
                                       div11      hello world!        
                                   
                                    callback    
                                    
                                         div12      callback            
                                     
                                          div13      chaining         
                                      
                                       chaining

.js 后面一个是 .css

$(document).ready(function(){		alert("文档加载完毕");	//	$("button").click(function(){//		$("p").css("background-color","red");//		$("a").hide();//	});		$("#hidden").click(function(){		$("p").hide(1000);	});	$("#show").click(function(){		$("p").show(2000);	});	$("#toggle").click(function(){		$("p").toggle(3000);	});	$("#fadeIn").click(function(){		$("#div1").fadeIn();		$("#div2").fadeIn(2000);		$("#div3").fadeIn(5000);	});	$("#fadeOut").click(function(){		$("#div1").fadeOut(5000);		$("#div2").fadeOut(2000);		$("#div3").fadeOut();	});	$("#fadeToggle").click(function(){		$("#div1").fadeToggle(5000);		$("#div2").fadeToggle(2000);		$("#div3").fadeToggle();	});	$("#fadeTo").click(function(){		$("#div1").fadeTo("slow",0.15);		$("#div2").fadeTo("slow",0.4);		$("#div3").fadeTo("slow",0.7);	});	$(".div5").click(function(){		$(".div4").slideUp("slow");	});	$(".div6").click(function(){		$(".div4").slideDown("slow");	});	$(".div7").click(function(){		$(".div4").slideToggle();	});	$("#animate1").click(function(){		$(".div8").animate({left:'600px'});	});	$("#animate2").click(function(){		$(".div8").animate({			left:'250px',			opacity:'0.5',			height:'150px',			width:'150px',		});	});	$("#animate3").click(function(){		$(".div8").animate({			left:'250px',			height:'+=150px',			width:'+=150px',		});	});	$("#animate4").click(function(){		$(".div8").animate({			height:'toggle'		});	});	$("#animate5").click(function(){		$(".div8").animate({height:'300px',opacity:'0.4'},"slow");		$(".div8").animate({width:'1000px',opacity:'0.8'},"slow");		$(".div8").animate({height:'100px',opacity:'0.4'},"slow");		$(".div8").animate({width:'500px',opacity:'0.8'},"slow");	});	$("#animate6").click(function(){		$(".div9").animate({left:'200px'},"slow");		$(".div9").animate({fontSize:'3em'},"slow");	});	$(".div10").click(function(){		$(".div11").slideToggle(10000);	});	$("#stop").click(function(){		$(".div11").stop();	});	$("#callback").click(function(){		$(".div12").hide(1000,function(){			alert("The paragraph is now hidden");		});	});	$("#chaining").click(function(){		$(".div13").css("color","red").slideUp(2000).slideDown(2000);	});	$(selector).click(function(){		$(this).hide();			});//	触发或将函数绑定到被选元素的点击事件	$(selector).dblclick(function(){			});	//触发或将函数绑定到被选元素的双击事件	$(selector).focus(function(){			});	//触发或将函数绑定到被选元素的获得焦点事件	$(selector).mouseover(function(){			});	//触发或将函数绑定到被选元素的鼠标悬停事件});//	将函数绑定到文档的就绪事件（当文档完成加载时）

div.div4,p.div5,p.div6,p.div7,div.div10,div.div12{			margin:0px;			padding:5px;			text-align:center;			background:#e5eecc;			border:solid 1px #c3c3c3;		}		div.div4{			height:120px;		}		div.div11{			padding:50px;			background:#e5eecc;			border:solid 1px #c3c3c3;			display:none;		}