jQuery 效果 fadeTo() 方法

jQuery 效果方法

fadeTo()方法将选定元素的不透明度逐渐更改为指定的不透明度。

此方法与fadeIn()方法相似,但是该方法取消隐藏元素,并且始终淡入100%的不透明度。

注意: fadeTo()方法不会更改页面的布局(所选元素仍将占用与以前相同的空间)。

语法:

$(selector)fadeTo.(duration, opacity, easing, callback)

实例

逐渐降低<div>元素的不透明度:

$("button").click(function(){
  $("div").fadeTo(500, 0.2);
});
测试看看‹/›

逐渐更改<div>元素的不透明度:

$("#btn1").click(function(){
  $("div").fadeTo(1000, 0);
});
$("#btn2").click(function(){
  $("div").fadeTo(1000, 1);
});
测试看看‹/›

使用callback参数:

$("button").click(function(){
  $("div").fadeTo(500, 0, function(){
    alert("不透明度降低!!!");
  });
});
测试看看‹/›

参数值

参数描述
duration一个字符串或数字,指定淡入效果将持续多长时间

可能的值:

  • 毫秒(例如100、500、2000等)

  • “fast”

  • “slow”

opacity指定淡入的不透明度。必须是介于0.00和1.00之间的数字
easing(可选)一个字符串,指定在动画的不同点上元素的速度。默认值为“ swing”

可能的值:

  • “swing”-在开始/结束时移动较慢,而在中间移动较快

  • “linear”-以恒定速度移动

callback(可选)fadeTo()方法完成,将调用的函数

jQuery 效果方法