ITPub博客

首页 > 大数据 > 数据分析 > 实现元素的淡入淡出效果

实现元素的淡入淡出效果

原创 数据分析 作者:金木大大大 时间:2023-12-18 10:31:04 0 删除 编辑

  jQuery Fading方法


  通过jQuery,您可以实现元素的淡入淡出效果。


  jQuery拥有下面四种fade方法:


  fadeIn()


  fadeOut()


  fadeToggle()


  fadeTo()


  jQuery fadeIn()方法


  jQuery fadeIn()用于淡入已隐藏的元素。


  语法:


  $(selector).fadeIn(speed,callback);


  可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。.


  可选的callback参数是fading完成后所执行的函数名称。


  下面的例子演示了带有不同参数的fadeIn()方法:


  实例


  $("button").click(function(){


  $("#div1").fadeIn();


  $("#div2").fadeIn("slow");


  $("#div3").fadeIn(3000);


  });


  http://www.jshk.com.cn/mb/reg.asp?kefu=xiaoding;//爬虫IP获取;


  jQuery fadeOut()方法


  jQuery fadeOut()方法用于淡出可见元素。


  语法:


  $(selector).fadeOut(speed,callback);


  可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。


  可选的callback参数是fading完成后所执行的函数名称。


  下面的例子演示了带有不同参数的fadeOut()方法:


  实例


  $("button").click(function(){


  $("#div1").fadeOut();


  $("#div2").fadeOut("slow");


  $("#div3").fadeOut(3000);


  });


  jQuery fadeToggle()方法


  jQuery fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。


  如果元素已淡出,则fadeToggle()会向元素添加淡入效果。


  如果元素已淡入,则fadeToggle()会向元素添加淡出效果。


  语法:


  $(selector).fadeToggle(speed,callback);


  可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。


  可选的callback参数是fading完成后所执行的函数名称。


  下面的例子演示了带有不同参数的fadeToggle()方法:


  实例


  $("button").click(function(){


  $("#div1").fadeToggle();


  $("#div2").fadeToggle("slow");


  $("#div3").fadeToggle(3000);


  });


  jQuery fadeTo()方法


  jQuery fadeTo()方法允许渐变为给定的不透明度(值介于0与1之间)。


  语法:


  $(selector).fadeTo(speed,opacity,callback);


  必需的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。


  fadeTo()方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度(值介于0与1之间)。


  可选的callback参数是该函数完成后所执行的函数名称。


  下面的例子演示了带有不同参数的fadeTo()方法:


  实例


  $("button").click(function(){


  $("#div1").fadeTo("slow",0.15);


  $("#div2").fadeTo("slow",0.4);


  $("#div3").fadeTo("slow",0.7);


  });


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/70032566/viewspace-3000435/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2023-10-12

  • 博文量
    249
  • 访问量
    157722