<!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. System Center VMM请注意不同语言版本的差异

    在私有云的项目中,经常需要判断System Center一些组件的连接是否OK. 我这里有开发,和测试两个环境,开发是英文版的System Center VMM,测试用的是中文版的System Cen ...

  2. Maven学习笔记3

    好了,按照笔记2的方法我们创建好一个web项目(使用maven:java项目还是java项目,web项目还是web项目,唯一的变化既是我们在pom.xml中配置了我们本应该先下载然后导入的jar包,这 ...

  3. 【权值分块】bzoj1588 [HNOI2002]营业额统计

    权值分块就是快……Rank5…… #include<cstdio> #include<algorithm> #include<cmath> using namesp ...

  4. python3全栈开发-并发编程，多线程

    一.什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...

  5. 1.1（java学习笔记） 面向过程与面向对象

    面向过程思考时,我们会先思考具体的步骤,第一步走什么,第二步做什么. 比如电脑新建文件夹,第一步:打开电脑 第二步:按下鼠标右键. 第三步:找到新建选项 第四步:点击新建选项下的文件夹 c语言是典型的 ...

  6. Bug Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&infra=stock error was

    yum -y install gcc 时候报bug: Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7& ...

  7. matlab和c混合编程

    参考: http://blog.sciencenet.cn/blog-620659-579885.html http://baike.baidu.com/link?url=HnHd3lU9mcVXwh ...

  8. VHDL硬件描述语言实现数字钟

    --VHDL上机的一个作业,程序太长实验报告册上写不下了.于是就在博客上留一份吧.LIBRARY IEEE; USE IEEE.STD_LOGIC_1164.ALL; USE IEEE.STD_LOG ...

  9. JavaScript跳转到页面某个锚点#

    JavaScript跳转到页面某个锚点: scroll(0, document.getElementById('锚点ID').offsetTop);

  10. Delphi 设置时间格式

    // 设置WINDOWS系统的短日期的格式SetLocaleInfo(LOCALE_SYSTEM_DEFAULT, LOCALE_SSHORTDATE, 'yyyy-MM-dd'); Applicat ...