<!DOCTYPE html>

<html>

<head>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

  $("#button1").mouseover(function(){

       $(".div1").stop().animate({opacity:1},1000);

    $(".div2").stop().animate({opacity:1},1000);

    $(".div3").stop().animate({opacity:1},1000);

  });

  $("#button1").mouseleave(function(){

       $(".div1").stop().animate({opacity:0},1000);

    $(".div2").stop().animate({opacity:0},1000);

    $(".div3").stop().animate({opacity:0},1000);

  });

});

</script>

</head>

<body>

<button id="button1">鼠标放在这里，使三个矩形淡入</button>

<div class="div1" style="width:80px;height:80px;opacity:0;background-color:red;"></div>

<br>

<div class="div2" style="width:80px;height:80px;opacity:0;background-color:green;"></div>

<br>

<div class="div3" style="width:80px;height:80px;opacity:0;background-color:blue;"></div>

</body>

</html>

另外

function () { $(".div1").animate({ 'opacity': 0 }，{ queue: false, duration: 1000 }); },

function () { $(".div1").animate({ 'opacity': 1 }， { queue: false, duration: 1000 }); }

也可以。

jquery淡入淡出无延迟代码的更多相关文章

  1. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  2. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  4. jquery淡入淡出

    html代码: <button id="b1" type="button">淡出</button> <button id=&quo ...

  5. jQuery 淡入淡出

    演示 jQuery fadeIn() 方法: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  6. jQuery淡入淡出效果

    如果是通过鼠标点击事件来触发动画效果可以使用 $("#button").click(function(){ $("#div").stop().fadeToggl ...

  7. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. jQuery淡入淡出的轮播图

    html结构: <div class="banna">            <ul class="img">              ...

  9. jQuery 淡入淡出有png图的时候 ie8下有黑色边框

    jQuery fadeTo 时ie8 png图片有黑色边框 往带有png图的样式里加 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ...

随机推荐

  1. 25,Spark Sort-Based Shuffle内幕彻底解密

    一:为什么需要Sort-Based Shuffle? 1,  Shuffle一般包含两个阶段任务: 第一部分:产生Shuffle数据的阶段(Map阶段,额外补充,需要实现ShuffleManager中 ...

  2. 认识createDocumentFragment

    今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏. DocumentFragments 是DOM节点.它们不是主DOM树的一部分.通常的用例是创建文档片段,将元素附加到文档片段 ...

  3. win7 office2016 激活（2018.6.17测试可用）

    坑比的一天,啥也没学,净用来折腾了office2016的安装了. 虽然有个wps可以用,但是真心的卡啊,用不惯就卸载了.虽然是卸载了,也埋了很多坑给我. 还是说office2016吧,网上到处找激活工 ...

  4. hdu6121

    hdu6121 题意 给出一棵树,\(0\) 为根节点,节点 \(i\) 的父节点标号是 \(\lfloor\frac{i-1}{k}\rfloor\),求所有子树大小的异或和. 分析 找规律.在纸上 ...

  5. linux查看进程内存占用

    ps -aux | grep xxx USER        PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND 可以看到RSS ...

  6. Jenkins一个任务下载多个git库代码

    公司的项目是微服务架构,一个服务对应的一个git仓库,现在的需求时拉取所有仓库代码下来,指定父级的pom.xml,一次性构建打包 jenkins在默认情况下,一个任务只能配置一个git仓库地址 1.安 ...

  7. 详细的KVO总结,包括基本改变,使用案例,注意点.看我就够了!

    概述 KVO全称Key-Value-Observing,也叫键值监听,是一种观察者设计模式.提供了一种机制,当指定的对象的属性被修改后,对象就会收到一个通知.也就是说每次指定的被观察的对象的属性被修改 ...

  8. [BZOJ2125]最短路(圆方树DP)

    题意:仙人掌图最短路. 算法:圆方树DP,$O(n\log n+Q\log n)$ 首先建出仙人掌圆方树(与点双圆方树的区别在于直接连割边,也就是存在圆圆边),然后考虑点u-v的最短路径,显然就是:在 ...

  9. [xsy2363]树

    设$f_{i,j}$表示$i$个点的树,权值为$j$且可以不选根的方案数,$g_{i,j}$表示$i$个点的树,权值为$j$且必选根的方案数 首先$g_{1,1}=0$ 我们可以把原树连上一个新的子树 ...

  10. 【树状数组】【枚举约数】 - Ambitious Experiment

    给定一个序列,支持以下操作: 对区间[l,r]的每个i,将1i,2i,3i,...这些位置的数都加d. 询问某个位置的数的值. 如果把修改看作对区间[l,r]的每个数+d,那么询问x位置上的数时,显然 ...