<!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. hdu5737

    首先思考一个朴素的做法 将b[]维护成一个线段树套有序表,每次修改a[]用线段树+lazy tag 并在线段树的子区间上在有序表中二分更新这段区间中a[i]>=b[i]的值,复杂度O(nlog^ ...

  2. AC日记——魔方 洛谷 P2007

    魔方 思路: 模拟: 代码: #include <cstdio> #include <cstring> #include <iostream> #include & ...

  3. QT_QMAKE_EXECUTABLE reported QT_INSTALL_LIBS as /usr/lib/i386-linux-gnu but ...

    $sudo apt-get install libqt4-dev done!!!

  4. python模块之XlsxWriter

    官网Tutorial:http://xlsxwriter.readthedocs.io/tutorial Xlsx是python用来构造xlsx文件的模块,可以向excel2007+中写text,nu ...

  5. tomcat的环境配置

    针对java8 选择tomcat进行配置 Tomcat 环境变量配置: 下载:http://tomcat.apache.org/download-80.cgi 解压后直接copy到C盘,这是免安装版本 ...

  6. SpringCloud Gateway(八)

    搭建SpringCloud Gateway 创建microservicecloud-springcloud-gateway-9528工程 pom文件 依赖: <dependencies> ...

  7. 28、Django实战第28天：个人信息展示

    从今天开始,我来完成个人中心部分,前端页面如下 1.浏览这些页面可以发现,它们和base.html是有区别的,因此,它们需要新建一个模板usercenter-base.html 2.把usercent ...

  8. 【并查集】【set】AtCoder - 2159 - 連結 / Connectivity

    Problem Statement There are N cities. There are also K roads and L railways, extending between the c ...

  9. 【R笔记】apply函数族

      (1)    apply apply函数通过对数组,矩阵,或非空维数值的数据框的“边缘”(margin)即行或列运用函数.返回值为向量,数组或列表.   函数形式 apply(X, MARGIN, ...

  10. Ubuntu下创建程序启动器

    1 以上是使用手动的方法,程序有图标 其中,配置文件改为: [Desktop Entry] Version=1.0 Name=eclipse Exec=/home/hu/soft/eclipse/ec ...