zoukankan      html  css  js  c++  java
  • jQ效果(淡入淡出)

    fading方法(淡入淡出):

    1、fadein(), 用于淡入已隐藏的元素

    语法:$(selector).fadeIn(speed,callback);

    speed 参数规定效果的时长,它可以取:"slow"、"fast" 或毫秒;callback 参数是 fading 完成后所执行的函数名称

    html:
    <button class="btn">点击</button>
    <div class="div1" style=" 50px; height: 50px; background: yellow; display: none;"></div>
    <div class="div2" style=" 50px; height: 50px; background: blue; display: none;"></div>
    <div class="div3" style=" 50px; height: 50px; background: red; display: none;"></div>
    

      

    jq:
    <script>
    	//点击淡入div元素
    	$(function(){
    		$(".btn").click(function(){
    			$("#div1").fadeIn();
    			$("#div2").fadeIn("slow");
    			$("#div3").fadeIn(3000);
    		});
    	});
    </script>
    

      2、fadeout(),用于淡出可见元素

    jq:
    <script>
    //点击淡出div元素
    	$(function(){
    		$(".btn").click(function(){
    			$("#div1").fadeOut();
    			$("#div2").fadeOut("slow");
    			$("#div3").fadeOut(3000);
    		});
    	});
    </script>	
    

      3、fadeToggle(),可以在 fadeIn() 与 fadeOut() 方法之间进行切换

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

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

    jq:
    <script>
    //点击淡入淡出
    	$(function(){
    		$(".btn").click(function(){
    			$("#div1").fadeToggle();
    			$("#div2").fadeToggle("slow");
    			$("#div3").fadeToggle(3000);
    		});
    	});
    </script>
    

      4、fadeTo(),允许渐变为给定的不透明度(值介于 0 与 1 之间)

    语法:$(selector).fadeTo(speed,opacity,callback);

    其中,speed和opacity是必需参数

    jq:
    <script>
    //渐变透明度
    	$(function(){
    		$(".btn").click(function(){
    			$("#div1").fadeTo("slow",0.15);
    			$("#div2").fadeTo("slow",0.3);
    			$("#div3").fadeTo("slow",0.8);
    		});
    	});
    </script>
    

      

  • 相关阅读:
    使用QTM 博客客户端
    sdut 2080 最长公共子序列问题
    sdut 1730 数字三角形问题
    HDOJ 1905 Pseudoprime numbers(模运算)
    HDU 1285确定比赛名次(拓补排序)
    HDU 2094产生冠军(map)
    HDOJ 1228 A+B(map水题)
    HDOJ 1713 相遇周期 (最大公约数与最小公倍数)
    HDOJ 2098 分拆素数和(筛选法求素数)
    (转)最大子序列和问题
  • 原文地址:https://www.cnblogs.com/1500418882qqcom/p/10008166.html
Copyright © 2011-2022 走看看