• jQuery淡入淡出效果fadeIn()/ fadeOut()/fadeToggle()
  • 未来的狂人 发表于 2016/2/24 13:24:00 | 分类标签: jQuery语法 隐藏显示效果
  • fadeIn()/ fadeOut()/fadeToggle()   (淡入淡出效果)

    语法:
    $(selector).fadeTo(speed,callback);//speed可取值:"slow"、"fast" 或毫秒。
    $(selector).fadeTo(speed,opacity,callback);//fadeToggle()有透明度属性(值介于 0 与 1 之间)
    案例
    $(document).ready(function(){
    $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
    });
    });

    fadeIn( ),fadeOut( )会让div块容积消失;
    $(document).ready(function)(){
    $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    });
    });
    fadeToggl()置透明度值后,块的容积依然存在,只是透明度改变。

    hide()/show()

    语法:

    $(selector).toggle(speed,callback);
    案例
    $(document).ready(function(){
    $("p").click(function(){
    $("#hide").hide();
    $("#show").show("fast");
    $("#toggle").toggle(600)
    });
    });
    如果设置了速度是毫秒值,被事件激发的块:
    块(有宽、高值且不是100%,没有定位)——默认从左上角开始出现/从右下角开始隐藏;
    块(有宽、高值且不是100%,有定位)——定位的坐标点开始出现/从反向位置隐藏;
    块(有高值,宽是100%)——默认从上开始出现/从下开始隐藏;

    slideDown()/slideUp()/slideToggle() (滑动效果)

    用法同上,但是只有上下的方向。
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:未来的狂人
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮