Jquery中使用显示()与隐藏()方法动画显示和隐藏图片

(1)功能描述

在页面中单击"显示"连接，通过显示()方法以动画的方式显示一幅图片，同时在方法中执行一个回调函数，用于改变图片的边框样式；单击已显示的图片时，通过隐藏()以动画的方式隐藏该图片。

(2)实现代码

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title脚本类型=' text/JavaScript ' src=' http :/jquery-2。1 .4 .js '/script style type=' text/CSS ' body { font-size :13 px } img { display : none；光标：指针}/样式脚本类型=' text/JavaScript ' $(function(){ $(' a ')).单击(函数(){ //显示连接$('img ').show(3000，function(){ $(this)).css(“”边框','实心1px # CCC’)；}) }) $('img ').单击(function(){ $(this)).藏(3000);})})/script/head body a href=' JavaScript : void(0 ' '显示/a img src=' http : IMages/dezai。jpg '/body/html动画方式慢慢显示

jquery hide()，show()方法用法详解

语法

$(选择器)。隐藏速度带有三个效果参数•毫秒（比如1500)'慢''正常''快'

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

例

html头脚本类型=' text/JavaScript ' src=' http :/jquery/jquery。js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(。BTN 1 ' .单击(函数(){ $('p ')).hide()；});$(. BTN 2 ').单击(函数(){ $('p ')).show()；});});这是一个段落/pbutton class=' BTN 1 '隐藏/button button class=' BTN 2 '显示/按钮/正文/html这个就是超简单的显示与隐藏了，如果要有效果我们只要在隐藏或显示中带时间或参数即可

脚本类型='text/javascript'$(文档)。ready(function(){ $(。BTN 1 ' .单击(函数(){ $('p ')).隐藏(1000);});$(. BTN 2 ').单击(函数(){ $('p ')).show(1000)；});});/script最后总结一个显示，隐藏实现的显示隐藏效果

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title脚本src=' http : jquery _ last。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。就绪(函数(){ });函数hiden(){$('#divObj ').hide()；//隐藏()函数，实现隐藏，括号里还可以带一个时间参数（毫秒)例如隐藏(2000)以2000毫秒的速度隐藏，还可以带慢，快}函数slideToggle(){$('#divObj ').幻灯片切换(2000年);//窗帘效果的切换，点一下收，点一下开，参数可以无，参数说明同上}函数show(){$('#divObj ').show()；//显示，参数说明同上}函数toggle(){$('#divObj ').切换(2000年);//显示隐藏切换，参数可以无，参数说明同上}函数slide(){$('#divObj ').向下滑动()；//窗帘效果展开}/脚本/标题dyh 3 div里内容的显示隐藏特效/h3input type='button' value='隐藏onclick=' hiden()'/input type=' button ' value='显示onclick=' show()'/input type=' button ' value='窗帘效果显示2 ' onclick=' slide()'/input type=' button ' value='窗帘效果的切换onclick=' slide toggle()'/input type=' button ' value='隐藏显示效果切换onclick=' toggle()'/div id=' div obj ' style=' display : none ' 1 .测试例子br/2 .测试例子br/3 .测试例子br/4 .测试例子br/5 .测试例子br/6 .测试例子br/7 .测试例子br/8 .测试例子br/9 .测试例子br/0 .测试例子br//div/body/html以上内容就是小编跟大家分享的Jquery中使用显示()与隐藏()方法动画显示和隐藏图片，希望大家喜欢。