jquery淡入淡出
html代码:
<button id="b1" type="button">淡出</button>
<button id="b2" type="button">淡入</button>
<button id="b3" type="button">淡入淡出</button>
<button id="b4" type="button">透明度</button>
<div id="div1" style="background:red;width:200px;height:200px">qqqqqqqqqqqqq</div>
<div id="div2" style="background:#00FF00;width:200px;height:200px">eeeeeeeeeeeeeee</div>
<div id="div3" style="background:#0000FF;width:200px;height:200px">gggggggggggggggggg</div>
js代码:
$(function(){
$("#b1").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$("#b2").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#b3").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
$("#b4").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
jquery淡入淡出的更多相关文章
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- jQuery淡入淡出瀑布流效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- jQuery 淡入淡出
演示 jQuery fadeIn() 方法: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- jQuery淡入淡出效果
如果是通过鼠标点击事件来触发动画效果可以使用 $("#button").click(function(){ $("#div").stop().fadeToggl ...
- jquery淡入淡出轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jquery淡入淡出无延迟代码
<!DOCTYPE html> <html> <head> <script src="jquery.js"></script& ...
- jQuery淡入淡出的轮播图
html结构: <div class="banna"> <ul class="img"> ...
- jQuery 淡入淡出有png图的时候 ie8下有黑色边框
jQuery fadeTo 时ie8 png图片有黑色边框 往带有png图的样式里加 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ...
随机推荐
- Palindrome_滚动数组&&DP
Description A palindrome is a symmetrical string, that is, a string read identically from left to ri ...
- Cash Machine_多重背包
Description A Bank plans to install a machine for cash withdrawal. The machine is able to deliver ap ...
- 郝斌老师的SQL教程
时隔两年,重拾数据库编程.郝斌老师的sql教程通俗易懂,用作复习简直不能太赞.
- convert转化成特定日期格式
CONVERT() 函数可以用不同的格式显示日期/时间数据. CONVERT(data_type(length),data_to_be_converted,style) 例子: CONVERT(VAR ...
- mark资料-python编辑器的选择与安装
1.pycharm 下载地址: 注册码: 注意事项: 2.ulipad参考虫师的地址 url: 3.eclipse+pydev
- android中“下次不再提示”的对话框(修改自某大神)
如图,我们要做得就是这个: 先上代码: 1,逻辑代码 package com.example.hello; import android.app.Activity; import android.ap ...
- ME23N PO 打印预览 打印问题
ME23N进入PO订单,点message查看订单打印的配置 点message查看订单打印的配置 然后spro查看 选择相应的outputtype,然后双击processing routines 可以看 ...
- JavaScript 编写多线程代码引用Concurrent.Thread.js(转)
这是一个很简单的功能实现: <script type="text/javascript" src="Concurrent.Thread.js">&l ...
- UpdatePanel与$.function()同时使用问题
在.NET中使用了UpdatePanel,里面的输入框使用了jQuery的日历选择器,接下来介绍下两者同时使用的一些细节及问题的解决方法,感兴趣的各位可以参考下哈 今天,在.NET中使用了Update ...
- python--列表生成式--8
原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 一.生成列表 要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],我 ...