学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>jQuery>>基础教程>>

jQuery 效果 - 淡入淡出

发布时间:2021-06-06点击:

    jQuery 效果 - 淡入淡出

    上次说的是Jquery的隐藏与显示,本章就说说另一个使用的效果——淡入淡出。

    向以前我们还要写一大堆代码来实现淡入淡出的效果,现在使用Jquery只需要一个函数即可搞定。

    一、jQuery fadeIn() 方法

    使用jQuery fadeIn() 方法可以很好的实现淡入显示已隐藏的元素,就是说想要使用这个方法需要先设计一个隐藏的元素用来淡入。

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

    语法如上,其中:

    selector:选择器,选择需要淡入的元素;

    speed:淡入的速度,可选值有:slow、fast或者指定的毫秒值,可选;

    callback:是方法fadeIn()执行完成后执行的方法函数。

    举个例子:

    $("button").click(function(){
      $("#span1").fadeIn();
      $("#span2").fadeIn("slow");
      $("#span3").fadeIn(5000);
    });
    

    二、jQuery fadeOut() 方法

    这个fadOut()方法与上面的fadeIn()正好相反,是用来淡出已显示的元素。

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

    语法如上,其中:

    selector:选择器,选择需要淡入的元素;

    speed:淡入的速度,可选值有:slow、fast或者指定的毫秒值,可选;

    callback:是方法fadeIn()执行完成后执行的方法函数。

    实例说明:
    $("button").click(function(){
      $("#span1").fadeOut();
      $("#span2").fadeOut("slow");
      $("#span3").fadeOut(3000);
    });

    三、jQuery fadeToggle() 方法

    这个jQuery fadeToggle() 方法是fadeIn()与fadeOut()两者的集合,为什么这么说呢?因为这个fadeToggle()方法既可以实fadeIn()的效果也可以实现FadeOut()的效果。

    它的作用是:淡已隐藏的元素,淡出已显示的元素,如果元素已隐藏使用jQuery fadeToggle()方法会使该元素淡入,如果已显示的元素使用jQuery fadeToggle()方法会淡出该元素。

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

    语法如上,其中:

    selector:选择器,选择需要淡入的元素;

    speed:淡入的速度,可选值有:slow、fast或者指定的毫秒值,可选;

    callback:是方法fadeIn()执行完成后执行的方法函数。

    四、jQuery fadeTo() 方法

    fadeTo()方法与上面三个实现的方式不太一样,fadeTo()是选中的元素渐变为指定的透明度(值介于0到1之间)。

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

    语法如上,其中:

    selector:选择器,选择需要淡入的元素;

    speed:渐变的速度,可选值有:slow、fast或者指定的毫秒值,必须选一个值;

    callback:是方法fadeIn()执行完成后执行的方法函数;

    opacity:不透明度(介于0到1之间)。
    $("button").click(function(){
      $("#span1").fadeTo("slow",0.15);
      $("#span2").fadeTo("slow",0.4);
      $("#span3").fadeTo("slow",0.7);
    });

    PS:使用上述四个方法需要注意字母的大小写。

赞一个(0)     踩一个(0)    

相关链接

搜索