<!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. 常用的LUA片段

    生成TS的办法 local t=ngx.now(); local n=os.date(,); n=n..-string.len(n)); ngx.say(n); 产生101至200的所有素数 func ...

  2. python socket 连续send，出现粘包问题

    使用网上socket代码实现ssh功能,如下: server.py #服务端Linux系统下:处理命令并返回import socketimport os#声明类型,生成socket链接对象server ...

  3. codeforces 868B The Eternal Immortality【暴力+trick】

    B. The Eternal Immortality time limit per test 1 second memory limit per test 256 megabytes input st ...

  4. HDU 1711 Number Sequence【kmp求子串首次出现的位置】

      Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], ...... , b[M] (1 <= ...

  5. python 面向对象(成员，静态，类)的(变量，方法)区别

    静态方法是使用@staticmethod装饰的方法,并且参数表中不需要self或者cls,可以访问类成员变量 默认的方法是有self的,是成员方法,可以访问私有变量和方法(通过self.xxx),或者 ...

  6. 哦这。。！C语言scanf输入的坑爹之处

    一. 今天闲来无事,跑去A题,本想3sA了poj1004,结果搞了10分钟,最令人困惑的问题就是为什么定义了double类型的变量,但是用scanf输入的时候标识符用%f的话,输入并不能完成,也就是说 ...

  7. 【Android】自定义View

    内置组件经常不满足我们的需求,那么就要自己来重写了,一般需要实现以下几个父类方法: 1.onMeasure 决定内部View的宽和高,以及自身的宽和高 2.onLayout 决定子View的放置位置 ...

  8. RPD Volume 168 Issue 4 March 2016 评论6

    Natural variation of ambient dose rate in the air of Izu-Oshima Island after the Fukushima Daiichi N ...

  9. 软Raid5，LVM，3T大硬盘纠缠操作的问题

    新服务器,4块3T大硬盘,软Raid5 组建 加上LVM分区各种一通操作... 悲催的是经过4天的软raid rebuild,最终状态给我FAIL了,当看到raid的state[ State : cl ...

  10. UILabel设置行间距

    UILabel设置行间距: NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]initWi ...