<!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. portainer,用于管理docker swarm，好像也不错哟

    shipyard的模式,好像在docker 1.12之后,没有啥用武之地了,也没有更新. 接下来,集群管理和调度,最有知名度的就是rancher了. 在rancher之前,我们试一下portainer ...

  2. 使用Postman访问OAuth2保护的WebAPI

    Instantnoodle现时的WebAPI已经受Azure AD保护,平时直接输入URL的方式已经不能够正常访问到WebAPI 所有API都可以Swagger页面找到 http://getazdev ...

  3. A - Enterprising Escape 【BFS+优先队列+map】

    The Enterprise is surrounded by Klingons! Find the escape route that has the quickest exit time, and ...

  4. Linux命令之fdisk

    fdisk fdisk [选项] <disk>  改变分区表 fdisk [选项] –l <disk>  列出所有分区表 fdisk –s <partition(分区编号 ...

  5. [九省联考2018]林克卡特树(DP+wqs二分)

    对于k=0和k=1的点,可以直接求树的直径. 然后对于60分,有一个重要的转化:就是求在树中找出k+1条点不相交的链后的最大连续边权和. 这个DP就好.$O(nk^2)$ 然后我们完全不可以想到,将b ...

  6. CodeForces - 986C AND Graph

    不难想到,x有边连出的一定是 (2^n-1) ^ x 的一个子集,直接连子集复杂度是爆炸的...但是我们可以一个1一个1的消去,最后变成补集的一个子集. 但是必须当且仅当 至少有一个 a 等于 x 的 ...

  7. 【二分法】【尺取法】bzoj2348 [Baltic 2011]Plagiarism

    一开始以为死于精度……调了半天发现死于long long…… 一.二分法: #include<cstdio> #include<cstring> #include<alg ...

  8. [CF911A]Nearest Minimums

    题目大意: 给你一个数列,问数列中最小数的最近距离. 思路: 直接模拟即可. #include<cstdio> #include<cctype> #include<alg ...

  9. 【R笔记】R语言中的字符串处理函数

    内容概览 尽管R是一门以数值向量和矩阵为核心的统计语言,但字符串同样极为重要.从医疗研究数据里的出生日期到文本挖掘的应用,字符串数据在R程序中使用的频率非常高.R语言提供了很多字符串操作函数,本文仅简 ...

  10. u-boot中添加mtdparts支持以及Linux的分区设置

    简介 作者:彭东林 邮箱:pengdonglin137@163.com u-boot版本:u-boot-2015.04 Linux版本:Linux-3.14 硬件平台:tq2440, 内存:64M   ...