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

网络编程 2024/11/20 佚名

3 2 1

(1)功能描述

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

(2)实现代码

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-2.1.4.js">

动画方式慢慢显示

jquery hide(),show()方法用法详解
语法
$(selector).hide(speed,callback)

speed带有三个效果参数 "slow"

"normal"

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


<html>
<head>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

这个就是超简单的显示与隐藏了，如果要有效果我们只要在hide或show中带时间或参数即可


<script type="text/javascript">
$(document).ready(function(){
 $(".btn1").click(function(){
 $("p").hide(1000);
 });
 $(".btn2").click(function(){
 $("p").show(1000);
 });
});
</script>


最后总结一个show,hide实现的显示隐藏效果




<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="/UploadFiles/2021-04-02/jquery_last.js">

以上内容就是小编跟大家分享的Jquery中使用show()与hide()方法动画显示和隐藏图片，希望大家喜欢。

                                
                                
                                    jquery_show_hide,show_hide 
                                
                                    标签：
                                        jquery_show_hide,show_hide