<!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. c# WinForm窗体编程中对窗体程序设置快捷键

    c# WinForm窗体编程中对窗体程序设置快捷键http://www.cnblogs.com/bison1989/archive/2011/09/19/2180977.html /// <su ...

  2. Docker背后的内核知识：命名空间资源隔离---亲测

    参考URL: https://linux.cn/article-5057-1.html 实现代码(网络和用户空间只是看懂了) 实际上,Linux内核实现namespace的主要目的就是为了实现轻量级虚 ...

  3. 输入数字n,按顺序打印出从1到最大的n位十进制数

    题目:输入数字n,按顺序打印出从1到最大的n位十进制数.比如输入3,则打印出1,2,3一直到最大的999. 跳进面试官的陷阱 void PrintfToMaxNDigits(int n) { ; ; ...

  4. 一个排好序的数组，找出两数之和为x的所有组合【双指针】

    #include <bits/stdc++.h> using namespace std; const int N = 1e6,INF = 0x3f3f3f3f; int a[N]; in ...

  5. [CTSC2017]吉夫特(Lucas定理,DP)

    送70分,预处理组合数是否为偶数即可. 剩下的数据,根据Lucas定理的推论可得当且仅当n&m=n的时候,C(n,m)为奇数.这样就可以直接DP了,对于每个数,考虑它对后面的数的影响即可,直接 ...

  6. hadoop InputFormat getSplits

    /** Splits files returned by {@link #listStatus(JobConf)} when * they're too big.*/ public InputSpli ...

  7. Java架构师之路 Spring学习笔记(一) Spring介绍

    前言 这是一篇原创的Spring学习笔记.主要记录我学习Spring4.0的过程.本人有四年的Java Web开发经验,最近在面试中遇到面试官总会问一些简单但我不会的Java问题,让我觉得有必要重新审 ...

  8. Delphi制作软键盘

        { 作者: han 日期: 2006.06.02 } unit softkey; interface uses Windows, Messages, SysUtils, Variants, C ...

  9. Python图像处理（16）：图像金字塔

    快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载,但请保留作者信息 图像金字塔是图像中多尺度表达的一种,最初用于机器视觉和图像压缩.一幅图像的金字塔是一系列以金字塔形 ...

  10. C++游戏界面不流畅的问题

    或许是我游戏玩多了,我突然发现,我的C++程序画面画面一顿一顿的,不流畅.肯定哪里不正确,要改. 奇怪啊,为什么我曾经,在我电脑上就不这么卡,就看不出画面一顿一顿的呢? 百度了,狗狗了,必应了,然而, ...