jQuery写fadeTo示例代码

代码如下:

<title></title>
<style type="text/css">
.imgclass{ width:300px; height:300px; border:solid 1px red;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').bind('click', function () {
$('img').fadeOut(2000, function () {
$('#Button1').val('哎，没了');
});
})
$('#Button2').bind('click', function () {
$('img').fadeIn(2000, function () {
$('#Button2').val('有了');
});
})
$('#Button3').bind('click', function () {
$('img').fadeTo(2000, 0.3, function () {
alert('动画执行完毕');
});
})
})
</script>
</head>
<body>
<div>
<div>
<input id="Button1" type="button" value="淡出" /><input id="Button2" type="button" value="淡入" /><input id="Button3" type="button" value="指定透明度" /></div>
<div><img src="images/1.jpg" class="imgclass"/></div>
</div>
</body>

赞 (0)

相关推荐

  • jQuery写fadeTo示例代码

    复制代码 代码如下: <title></title> <style type="text/css"> .imgclass{ width:300px; height:300px; border:solid 1px red;} </style> <script src="jquery-1.9.1.js" type="text/javascript"></script> <s

  • jQuery遍历Form示例代码

    jQuery 遍历 Form,代码如下 复制代码 代码如下: <script type="text/javascript"> // 取得 id 为form1 的 form 的所有输入变量 values = $("#form1").serializeArray(); var values, index; for (index = 0; index < values.length; ++index) { if (values[index].name =

  • js模仿jquery的写法示例代码

    测试代码: 复制代码 代码如下: (function(){ var p=new PEvent(document); p.click(function() { //alert("单击"); //alert(p.style); var html=""; for ( var item in document) { html+=item+':'+document[item]+"\r\n"; } //alert(html); }); p.dblclick(

  • 实用的Jquery选项卡TAB示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JQuery jsonp 使用示例代码

    复制代码 代码如下: <?php if (isset($_GET['jsonpcallback'])){ echo $_GET['jsonpcallback']."([{id:1,name:'aaaa1'},{id:2,name:'bbbb2'}])"; exit; } ?> <html> <script type='text/javascript' src='commons/scripts/jquery.js'></script> &l

  • jQuery同步提交示例代码

    本文实例讲述了jQuery同步提交的方法.分享给大家供大家参考,具体如下: 使用jQuery 框架,同步提交演示 在一些严格检测或者递归.循环调用的情况下,如果不能同步返回数据则可能会出现错误结果,所以需要使用同步提交技术,jQuery默认是异步操作,需要显式设置异步属性async为false,便可以实现同步. 自定 data 提交 function GroupCheck(url, operate, check, group, joker) { var result = -1; $.ajax(

  • jquery.post用法示例代码

    使用ajax在前端验证是否执行某个操作 jquery.post参数为 url,[data],[callback],[type] url:发送请求地址. data:待发送 Key/value 参数. callback:发送成功时回调函数. type:返回内容格式,xml, html, script, json, text, _default. 复制代码 代码如下: $.post('admin/HhCheckVote.do?ids=' + '${ids}', {}, function(flag) {

  • 使用jquery解析XML示例代码

    xml文件结构:books.xml <?xml version="1.0" encoding="UTF-8"?> <root> <book id="1"> <name>深入浅出extjs</name> <author>张三</author> <price>88</price> </book> <book id="

  • jQuery调用RESTful WCF示例代码(GET方法/POST方法)

    不废话了,直奔主题吧 wcf端: 近几年比较流行restful,为了能让ajax调用,同时也为了支持restful风格的uri,在创建一个Ajax-enabled Wcf Service后,必须手动修改svc文件,指定Factory,即: <%@ ServiceHost Language="C#" Debug="true" Service="ajaxSample.HelloWorld" CodeBehind="HelloWorld

  • Vue+jquery实现表格指定列的文字收缩的示例代码

    Vue+jquery实现表格指定列的文字收缩的示例代码

    本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码,分享给大家,具体如下: 效果很简单,但是写起来真的不容易,因为Vue对于没有React这种前端框架经验的人是不友好的 (少吐槽,多工作,省下时间出去hi) 先说一下我走过的弯路:我之间想通过 v-if 指令去操作这一列 代码是这样的: <el-table-column width="250" align="center" label="比较基准"> <templa

随机推荐