zoukankan      html  css  js  c++  java
  • jQ效果(显示隐藏)

    1、显示隐藏

    显示:$(selector).show(speed,callback);

    隐藏:$(selector).hide(speed,callback);

    speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称

    html:
    <div class="ex">
    	<button class="hide">点我隐藏</button>
    </div>
    <button class="show">点我显示</button>
    

      

    css:
    div.ex{
    		 200px;
    		height: 100px;
    		background: yellow;
    	}
    

      

    jq:
    <script>
    	//点击按钮隐藏div
    	$(function(){
    		$(".ex .hide").click(function(){               //.ex后要加空格
    			$(this).parents(".ex").hide("slow");             //this指class为hide的button
    		});
    	});
    	$(function(){
    		$(".show").click(function(){
    			$(this).prev(".ex").show("slow");
    		});
    	});	
    </script>
    

      2、带参数的hide()方法和带参数的hide()方法,并使用回调函数

    jq:
            //带有speed参数的隐藏方法
    	$(function(){
    		$(".hide").click(function(){
    			$(".ex").hide(1000);
    		});
    	});
    	//带有speed参数的隐藏方法,并使用回调函数
    	$(function(){
    		$(".hide").click(function(){
    			$(".ex").hide(1000,"linear",function(){//第二个参数是一个字符串,表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing",可以不写
    				alert("hide()方法完成");
    			});
    		});
    	});
    

      3、toggle() 方法

    toggle() 方法来切换 hide() 和 show() 方法,(显示被隐藏的元素,并隐藏已显示的元素)

    jq:
    //toggle() 方法来切换 hide() 和 show() 方法
    	$(function(){
    		$("show").click(function(){
    			$(".ex").toggle();
    		});
    	});
    

      

  • 相关阅读:
    Advanced Configuration Tricks
    Reviewing the Blog Module
    Editing and Deleting Data
    Making Use of Forms and Fieldsets
    Understanding the Router
    SQL Abstraction and Object Hydration
    Preparing for Different Databases
    Java学习理解路线图
    Openstack学习历程_1_视频
    CentOS安装Nginx负载
  • 原文地址:https://www.cnblogs.com/1500418882qqcom/p/10006137.html
Copyright © 2011-2022 走看看