Jqurey 在显示或隐藏元素时的动画效果

Jqurey 淡进淡出的动画效果


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


使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,使用 toggle() 方法来切换 hide() 和 show() 方法:

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


实例:

$("button").click(function(){
  $("p").hide(1000);
});
$("button").click(function(){
  $("p").toggle();
});


动画效果:

透明度逐渐降低,形状由右下角到左上角逐渐变小消失。

     

详细参考:http://www.w3school.com.cn/jquery/jquery_hide_show.asp


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

使用 fadeOut()和 fadeIn() 方法来淡出和淡入 HTML 元素,使用 fadeToggle() 方法来切换 fadeOut() 和 fadeIn() 方法。

fadeTo(duration,0.0)与fadeOut()的区别,fadeTo(duration,0)元素本身看不见了,但它依然占用页面空间。

语法:

$(selector).fadeIn(speed,callback); 
$(selector).fadeOut(speed,callback); 
$(selector).fadeToggle(speed,callback); 
$(selector).fadeTo(speed,opacity,callback); 
	

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。


实例:

$("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeTo('slow',0.2);
      $("div.second").fadOut(300).fadeIn(400);
    });

动画效果:

透明度逐渐降低或逐渐加强,形状不变

详细参考:http://www.w3school.com.cn/jquery/jquery_fade.asp


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

滑动方法可使元素上下滑动


语法:

$(selector).slideDown(speed,callback); 
$(selector).slideUp(speed,callback); 
$(selector).slideToggle(speed,callback); 	


实例:

$("#flip").click(function(){
  $("#panel").slideDown();
});

动画效果:

元素形状由上至下或由下至上逐渐消失


详细参考:http://www.w3school.com.cn/jquery/jquery_slide.asp


应用示例:


用JQuery删除一个dom节点,显示动画,让节点先逐渐消失,然后删除

//slideUp(1000)1000毫秒内元素形状由下至上逐渐消失
//delay(300)对接下来要执行的函数延迟300毫秒执行
//queue是元素的函数队列执行完后,在执行里面function
$("#objid”).slideUp(1000).delay(300).queue(function() {
	$("#objid“).remove();
});

queue()方法可以参考:http://www.w3school.com.cn/jquery/data_queue.asp




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值