zoukankan      html  css  js  c++  java
  • jQuery 效果

    实例

    jQuery fadeIn()
    演示 jQuery fadeIn() 方法。
    jQuery fadeOut()
    演示 jQuery fadeOut() 方法。
    jQuery fadeToggle()
    演示 jQuery fadeToggle() 方法。
    jQuery fadeTo()
    演示 jQuery fadeTo() 方法。

    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);
    });

    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);
    });

    jQuery 效果参考手册

    如需全面查阅 jQuery 效果,请访问 jQuery 效果参考手册

  • 相关阅读:
    NOIP赛前集训备忘录(含每日总结)(日更?。。。)
    饮一碗鸡汤,换我前进的力量(持续更新......)
    各种用来学习的东西总结
    [FJOI2007]轮状病毒 题解(dp(找规律)+高精度)
    洛谷P1823 [COI2007] Patrik 音乐会的等待(单调栈+二分查找)
    [CQOI2012]模拟工厂 题解(搜索+贪心)
    [CQOI2014]数三角形 题解(组合数学+容斥)
    洛谷P2507 [SCOI2008]配对 题解(dp+贪心)
    洛谷P1484 种树&洛谷P3620 [APIO/CTSC 2007]数据备份 题解(堆+贪心)
    洛谷P1155 双栈排序题解(图论模型转换+二分图染色+栈)
  • 原文地址:https://www.cnblogs.com/rinack/p/4554629.html
Copyright © 2011-2022 走看看