(1)功能描述
在页面中单击“显示”连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式;单击已显示的图片时,通过hide()以动画的方式隐藏该图片。
(2)实现代码
无标题文档body{font-size:13px}
img{display:none;cursor:pointer}
$(function(){
$("a").click(function(){ //显示连接
$("img").show(3000,function(){
$(this).css("border","solid 1px #ccc");
})
})
$("img").click(function(){
$(this).hide(3000);
})
})
显示
动画方式慢慢显示
jquery hide(),show()方法用法详解
语法
$(selector).hide(speed,callback)
speed带有三个效果参数 •毫秒 (比如 1500)
•"slow"
•"normal"
•"fast"
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度.
例
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
This is a paragraph.
Hide
Show
这个就是超简单的显示与隐藏了,如果要有效果我们只要在hide或show中带时间或参数即可
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide(1000);
});
$(".btn2").click(function(){
$("p").show(1000);
});
});
最后总结一个show,hide实现的显示隐藏效果
无标题文档$(document).ready( function(){});
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show(){
$("#divObj").show();//显示,参数说明同上
}
function toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function slide(){
$("#divObj").slideDown();//窗帘效果展开
}
div里内容的显示隐藏特效
1.测试例子
2.测试例子
3.测试例子
4.测试例子
5.测试例子
6.测试例子
7.测试例子
8.测试例子
9.测试例子
0.测试例子
以上内容就是小编跟大家分享的Jquery中使用show()与hide()方法动画显示和隐藏图片,希望大家喜欢。