---恢复内容开始---

$(document).ready(function () {
　　$(".jianjie").click(function () {
　　　　$(this).toggleClass("brief");//切换类名，在一个类名上增加、删除类名
　　});
　　$(".jj_v").click(function () {
　　　　$(".none_v").slideToggle("slow");//点击滑动显示、隐藏
　　});
　　$(".jj_v").click(function () {
　　　　$(".none_v").fadeToggle(1000);//点击淡入、淡出
　　});
　　$(".jj_v").click(function () {
　　　　$(".none_v").toggle();//点击显示、隐藏
　　});
});
　　var a = 0;
　　$(".jj_v").click(function () {
　　　　　　a++;
　　　　if(a%2){
 　　　　　　　　$(".none_v").show(1000);//1秒展开
　　　　　　　　$(".none_v").fadeIn("slow");//淡入
 　　　　}else{
　　　　　　　　$(".none_v").hide(1000);//1秒隐藏
　　　　　　　　$(".none_v").fadeOut("1000");//淡出
　　　　 }
});
 

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
　　$("button").click(function(){
　　　　$("#div1").fadeTo("slow",0.15);//透明度
　　　　$("#div2").fadeTo("slow",0.4);
　　　　$("#div3").fadeTo("slow",0.7);
　　});
});
</script>
</head>

<body>

<p>演示带有不同参数的 fadeTo() 方法。</p>
<button>点击这里，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

---恢复内容结束---

jq 切换功能toggle的更多相关文章

  1. ViewPager取消左右滑动切换功能

    ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...

  2. ViewPager撤消左右滑动切换功能

    ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...

  3. javascript回车完美实现tab切换功能

    javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...

  4. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  5. 【百度地图API】暑假放假回老家——城市切换功能

    原文:[百度地图API]暑假放假回老家--城市切换功能 任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢? 如何实现: 利用API先搜索到要去城 ...

  6. 为JQuery EasyUI 表单组件增加“焦点切换”功能

    1.背景说明 在使用 JQuery  EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabinde ...

  7. vue实现tab切换功能

    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...

  8. AndroidStudio制作底部导航栏以及用Fragment实现切换功能

    前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...

  9. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

随机推荐

  1. Java+opencv实现人脸检测

    版本 Java1.8 opencv3.4 代码: import java.awt.Graphics; import java.awt.image.BufferedImage; import javax ...

  2. 同一台电脑中同时安装oracle database 服务器端和oracle client 客户端时注意

    如果在一台电脑中同时安装oracle的客户端和服务器端软件, 一定要先安装oracle database 服务端,并进行相应的配置 listener.ORA. 然后再去安装oracle client ...

  3. machine learning data sets

    http://archive.ics.uci.edu/ml/datasets.html 例如 3 分类 鸢尾花 数据集: http://archive.ics.uci.edu/ml/datasets/ ...

  4. POJ2376 Cleaning Shifts

    题意 POJ2376 Cleaning Shifts 0x50「动态规划」例题 http://bailian.openjudge.cn/practice/2376 总时间限制: 1000ms 内存限制 ...

  5. Centos7.3 之mysql5.7二进制安装

    #!/bin/bash #注意,该脚本是在centos7.3非生产环境下测试的,其他版本的系统可能不适用,要根据情况修改.需要先下载好mysql二进制包到本地(我一般都是在root家目录下操作,文件也 ...

  6. repos配置

  7. .net updatePannel 局部刷新效果实现后，但是仍是全部刷新的修改方法

    最近做了一个小例子,就是晚上都有的那种小的updatepannel的局部刷新的小例子,但是发现按照那个例子虽然能够实现label2的局部刷新,但是看上去效果确实整个页面都在刷新,这让人很头疼,所以我在 ...

  8. JavaScript基础应用

    1.实现字符串的反向输出 var s="abc" s.split('').reverse().join('')​  -----> "cab" 知识点: S ...

  9. pt-table-checksum校验与pt-table-sync修复数据

    1:下载工具包 登录网站下载相应的工具包 https://www.percona.com/downloads/percona-toolkit/LATEST/ 2:安装 (1)yum安装: sudo y ...

  10. pygame 简单播放音乐程序

    环境: python2.7 pygame 功能: 播放指定目录下的歌曲(暂时mp3),可以上一曲.下一曲播放. 文件目录: font  字体文件夹 image  图片文件夹 music  音乐文件夹 ...