<!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. [BZOJ2151] 种树 贪心

    2151: 种树 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1151  Solved: 613[Submit][Status][Discuss] ...

  2. bisect二分查找模块使用

    import bisectL = [1, 3, 3, 6, 8, 12, 15]x = 5x_insert_point = bisect.bisect_left(L, x)# 在L中查找x,x存在时返 ...

  3. Tarjan+topsort(DP)【P3387】 [模板]缩点

    Description 给定一个n个点m条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 允许多次经过一条边或者一个点,但是,重复经过的点,权值只计算一次 ...

  4. Joomla!网站扫描工具joomscan

    Joomla!网站扫描工具joomscan   Joomla!是一款知名的PHP语言编写的CMS系统.很多网站都使用Joomla!搭建而成.Kali Linux集成了一款Joomla!网站扫描工具jo ...

  5. [Contest20180313]灵大会议

    为了方便才用lct,没想到最后要加读入优化才能过... 有一个结论就是在一条链上,如果能找到一个点使得这个点划分链左右两边的树节点权值和最相近,那么这个点就是答案 用lct维护,每个splay节点存树 ...

  6. 【树上莫队】【带修莫队】【权值分块】bzoj1146 [CTSC2008]网络管理Network

    #include<cstdio> #include<cstring> #include<algorithm> #include<cmath> using ...

  7. [ARC087D]FT Robot

    题目大意: 一个机器人按照给定的一系列指令进行运动. 总共有两种指令: T:向某个方向旋转90度. F:向当前所朝的方向走一个单位长度. 一开始机器人站在原点,且朝向x的正半轴方向,问机器人是否可能会 ...

  8. Spring Boot中使用MyBatis注解配置详解

    传参方式 下面通过几种不同传参方式来实现前文中实现的插入操作. 使用@Param 在之前的整合示例中我们已经使用了这种最简单的传参方式,如下: @Insert("INSERT INTO US ...

  9. Visual Studio 断点无法命中怎么办？

    经常远程调试服务器打断点是空心的,很抓狂,正确的方法应该是 #if DEBUG if (System.Diagnostics.Debugger.IsAttached) { System.Diagnos ...

  10. 查看Java代码对应的汇编指令又一利器，JITWatch 转

    http://www.tuicool.com/articles/IRrIRb3 时间 2015-05-13 08:00:00  Liuxinglanyue's Blog 原文  http://java ...