jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】

2023-07-24 13:35:04 269

显示与隐藏

Document #content{display:none;} $('#btn').click(function(event){ if($(this).text()==='显示说明'){ $('#content').show(); //$('#content').show('slow');//设置显示速度，1000为一秒，也可以用fast或slow //$('#content').show('slow',function(){ //$('h3').css('color','red'); //});//设置显示完成后的回调函数 $(this).text('隐藏说明'); }else{ $('#content').hide(); $(this).text('显示说明'); } }); });

百度logo，埃里克森上放声大哭就会发生放声大哭肌肤时受到了飞机上的法律手段无可奈何花落去

显示说明

淡入与淡出

Document #content{display:none;} //1、淡入 $('#fadeIn').click(function(event){ $('#group1img:first').fadeIn('slow'); $('#group1img:eq(1)').fadeIn('fast'); $('#group1img:last').fadeIn(3000,function(){ alert('淡入'); }); }); //2、淡出 $('#fadeOut').click(function(event){ $('#group2img:first').fadeOut('slow'); $('#group2img:eq(1)').fadeOut('fast'); $('#group2img:last').fadeOut(3000,function(){ alert('淡出'); }); }); //3、淡入/淡出结合 $('#fadeToggle').click(function(event){ $('#group3img:first').fadeToggle('slow'); $('#group3img:eq(1)').fadeToggle('fast'); $('#group3img:last').fadeToggle(3000,function(){ alert('淡入/淡出结合'); }); }); //4、设置褪色级别 $('#fadeTo').click(function(event){ $('#group4img:first').fadeTo('slow',0.6); $('#group4img:eq(1)').fadeTo('fast',0.4); $('#group4img:last').fadeTo(3000,0.2,function(){ alert('图片褪色'); }); }); }); 淡入

滑动

滑动效果

百度

要福克斯地方思考就回复剞城飘飘㱒发生纠纷还是叶

动画实例

动画 $(document).ready(function(){ $('#btn').click(function(event){ $('img').before('
'); //当按钮内容为显示时，修改按钮内容，显示图片和说明 if($(this).text()=='显示'){ $(this).text('隐藏'); $('img').animate({//动画属性对象（必选） width:200,//属性必须是css属性，只支持数字型，不支持字体颜色 opacity:1,//属性值单位：默认为px },{//动画选项属性（可选） duration:3000, complete:function(event){ $('.content').slideDown(3000); } }); }else{//当按钮内容为隐藏时，修改按钮内容，隐藏图片和说明 $(this).text('显示'); $('img').animate({//动画属性对象（必选） width:0, opacity:0, },{//动画选项属性（可选） duration:3000, complete:function(event){ $('.content').slideUp(3000); } }); } }); }); 显示

富士康地方就是看适当放宽了；收款方式斯洛伐克但是

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】

显示与隐藏

淡入与淡出

滑动

百度

动画实例

热门推荐

随机推荐