<!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. AC日记——pigs poj 1149

    POJ - 1149 思路: 最大流: 代码: #include <cstdio> #include <cstring> #include <iostream> # ...

  2. strcmp()函数-比较字符串的大小、字符串排序

    1.比较字符串的大小: 用法:strcmp(字符串1,字符串2),若字符串1>字符串2 则返回1,字符串1<字符串2 则返回 -1,相等返回0. 比较两个字符串的算法是:逐个比较两个串中对 ...

  3. POJ 3264.Balanced Lineup-结构体版线段树(区间查询最值)

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 53721   Accepted: 25244 ...

  4. HDU 1711 Number Sequence【kmp求子串首次出现的位置】

      Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], ...... , b[M] (1 <= ...

  5. Dijkstra【p3003(bzoj2100)】[USACO10DEC]苹果交货Apple Delivery

    Description 贝西有两个又香又脆的红苹果要送给她的两个朋友.当然她可以走的C(1<=C<=200000)条"牛路"都被包含在一种常用的图中,包含了P(1< ...

  6. 洛谷——P1589 泥泞路

    P1589 泥泞路 题目描述 暴雨过后,FJ的农场到镇上的公路上有一些泥泞路,他有若干块长度为L的木板可以铺在这些泥泞路上,问他至少需要多少块木板,才能把所有的泥泞路覆盖住. 输入输出格式 输入格式: ...

  7. 母亲的牛奶(milk) (BFS)

    问题 A: 母亲的牛奶(milk) 时间限制: 1 Sec  内存限制: 64 MB提交: 14  解决: 8[提交][状态][讨论版] 题目描述 农民约翰有三个容量分别是A.B.C升的桶,A.B.C ...

  8. [CF494C]Helping People

    题意:有$n$个穷人,每个穷人有$a_i$的钱,有一个富人决定做$q$次捐赠$(l_i,r_i,p_i)$,表示他有$p_i$的概率给$[l_i,r_i]$的人捐$1$的钱,捐赠的价值为捐赠后最富的人 ...

  9. Echarts无数据时只显示文字不显示动画

    只需要在option中加入如下代码即可: noDataLoadingOption: {                        text: '暂无数据',                     ...

  10. 分布式缓存DistributedCache的使用

    分布式缓存用于将使用的小文件首先分发到各个datanode节点上,然后利用map/reduce阶段的setup()方法将文件内容读入内存,加快程序执行.具体实现方法如下: http://demievi ...