jquery淡入淡出无延迟代码
2023-09-11 14:19:27 时间
<!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中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析
- jQuery分页插件(jquery.page.js)的使用
- jquery与ajax应用
- jquery 延迟加载代码
- Jquery对table表格的动态修改
- ASP.NET利用JQuery实现AJAX(前台脚本代码)调用后台静态方法
- jquery 好看的弹出层,过一会自动消失,有滚动条也能垂直居中(thymeleaf)( 代码库)
- 10个简单实用的 jQuery 代码片段
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
- [jPlayer] HTML5 Audio & Video for jQuery
- Atitit table的读取与遍历 jquery jsoup 目录 1. atitit.gui控件的定位与选择器1 2. 读取表格流程 遍历表格table1 3. W3cdom标准化1
- Jquery超简单遮罩层实现代码
- jQuery UI 实例 - 选择(Selectable)
- 用jquery写循环播放div -2
- jQuery漏洞
- jquery开发之代码风格
- python web py入门(70)- jQuery - 监听键盘事件的方法
- python web py入门(57)- jQuery - 多个JS代码的文件
- jQuery EasyUI 拖放 - 创建拖放的购物车