领券
主机
微信
X
更多关注公众号
秒后消失

jQuery效果


1.jQuery 隐藏和显示hide() 和 show()、toggle()

点击下方按钮操作右侧广告显示状态
				//语法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
//代码
$(document).ready(function(){
	$("#hide").click(function(){
		$("#ys1").hide(1000,function(){alert("ys1隐藏了")});
	});
	$("#show").click(function(){
		$("#ys1").show(1000,function(){alert("ys1出现了")});
	});
	$("#toggle").click(function(){
		$("#ys1").toggle(1000);
	});
});		
				

2.jQuery 淡入淡出fadeIn() 和 fadeOut()、fadeToggle()、fadeTo()

				//语法
//fadeIn() 用于淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
//fadeOut() 方法用于淡出可见元素
$(selector).fadeOut(speed,callback);
//fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeToggle(speed,callback);
//fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,opacity,callback);
/*实例*/
$("#ys2-menu").fadeToggle(500);
	
				

3.jQuery 滑动 slideDown() slideUp() slideToggle()

				//语法
/*slideDown() 方法用于向下滑动元素
* slideUp() 方法用于向上滑动元素。
* slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
//语法
$(selector).slideUp(speed,callback);
*
				

4.jQuery 动画 animate() stop() 链(Chaining)

				//语法
$(selector).animate({params},speed,callback);
//jQuery - 链(Chaining)
$("#ys4-img").animate({height:'300px',opacity:'0.4'},"slow")
										 .animate({height:'100px',opacity:'0.4'},"slow") 
										 .animate({height:'100px',opacity:'0.4'},"slow")
										 .animate({left:'450px',top:'-400px',opacity:'0.4'},"slow")
										 .animate({left:'0px',top:'50px',opacity:'1',height:'700px'},"slow");
*