Gunakan kaedah show() dan hide() untuk menghidupkan dan menyembunyikan imej dalam Jquery

Gunakan kaedah show() dan hide() untuk menghidupkan dan menyembunyikan imej dalam Jquery_jquery

WBOY

Lepaskan： 2016-05-16 15:37:18

asal

1542 orang telah melayarinya

(1) Penerangan fungsi

Klik sambungan "Tunjukkan" pada halaman untuk memaparkan gambar secara animasi melalui kaedah show() Pada masa yang sama, fungsi panggil balik dilaksanakan dalam kaedah untuk menukar gaya sempadan gambar gambar yang dipaparkan Apabila, gunakan hide() untuk menyembunyikan gambar dalam cara animasi.

(2) Kod pelaksanaan

<!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="../jquery-2.1.4.js"></script>
<style type="text/css">
  body{font-size:13px}
  img{display:none;cursor:pointer}
</style>
<script type="text/javascript" >
  $(function(){
    $("a").click(function(){ //显示连接
      $("img").show(3000,function(){
        $(this).css("border","solid 1px #ccc");
        })
      })
      $("img").click(function(){
        $(this).hide(3000);
        })
    })
</script>

</head>

<body>
  <a href="javascript:void(0)">显示</a>
  <img  src="Images/dezai.jpg" / alt="Gunakan kaedah show() dan hide() untuk menghidupkan dan menyembunyikan imej dalam Jquery_jquery" >
</body>
</html>

Salin selepas log masuk

Animasi yang dipaparkan secara perlahan

Gunakan kaedah show() dan hide() untuk menghidupkan dan menyembunyikan imej dalam Jquery_jquery

Penjelasan terperinci tentang penggunaan kaedah jquery hide(), show()

Tatabahasa

$(pemilih).sembunyi(kelajuan,panggil balik)
kelajuan mempunyai tiga parameter kesan • milisaat (cth. 1500)
•"lambat"
•"biasa"
•"cepat"

Apabila menetapkan kelajuan, elemen akan menukar ketinggian, lebar, jidar, pelapik dan ketelusannya secara beransur-ansur apabila ia berubah daripada kelihatan kepada tersembunyi.

Contoh

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".btn1").click(function(){
 $("p").hide();
 });
 $(".btn2").click(function(){
 $("p").show();
 });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

Salin selepas log masuk

Ini adalah paparan dan sorok yang sangat mudah. Jika kita ingin mempunyai kesan, kita hanya perlu menambah masa atau parameter untuk menyembunyikan atau menunjukkan

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

Salin selepas log masuk

Akhirnya ringkaskan paparan dan kesan sembunyi yang dicapai dengan tunjukkan dan sembunyikan

<!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="jquery_last.js" type="text/javascript"></script>
<script type="text/javascript">
$(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();//窗帘效果展开
}
</script>
</head>
<body>
<h3>div里内容的显示隐藏特效</h3>
<input type="button" value="隐藏" onclick="hiden()"/>
 <input type="button" value="显示" onclick="show()"/>
 <input type="button" value="窗帘效果显示2" onclick="slide()"/>
 <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
 <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
<div id="divObj" 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>

Salin selepas log masuk

Kandungan di atas adalah penggunaan kaedah show() dan hide() dalam Jquery untuk menghidupkan dan menyembunyikan gambar saya harap anda menyukainya.