suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie die Methoden show() und hide(), um Bilder in Jquery_jquery zu animieren und auszublenden

Verwenden Sie die Methoden show() und hide(), um Bilder in Jquery_jquery zu animieren und auszublenden

WBOY
WBOYOriginal
2016-05-16 15:37:181532Durchsuche

(1) Funktionsbeschreibung

Klicken Sie auf der Seite auf die Verbindung „Anzeigen“, um ein Bild animiert anzuzeigen. Gleichzeitig wird in der Methode eine Rückruffunktion ausgeführt, um den Rahmenstil des Bildes zu ändern das angezeigte Bild Wenn Sie hide() verwenden, um das Bild auf animierte Weise auszublenden.

(2) Implementierungscode

<!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="Verwenden Sie die Methoden show() und hide(), um Bilder in Jquery_jquery zu animieren und auszublenden" >
</body>
</html>

Langsam angezeigte Animation

Verwenden Sie die Methoden show() und hide(), um Bilder in Jquery_jquery zu animieren und auszublenden

Detaillierte Erläuterung der Verwendung der Methoden jquery hide() und show()

Grammatik

$(selector).hide(speed,callback)
Geschwindigkeit hat drei Effektparameter: • Millisekunden (z. B. 1500)
•„langsam“
•„normal“
•„schnell“

Beim Einstellen der Geschwindigkeit ändert das Element schrittweise seine Höhe, Breite, Rand, Polsterung und Transparenz, während es von sichtbar zu ausgeblendet wechselt.

Beispiel

<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>

Dies ist ein supereinfaches Ein- und Ausblenden. Wenn wir einen Effekt erzielen möchten, müssen wir nur Zeit oder Parameter zum Ein- oder Ausblenden hinzufügen 

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

Fassen Sie abschließend den Anzeige- und Ausblendeffekt zusammen, der durch Ein- und Ausblenden erzielt wird

<!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>

Der obige Inhalt ist die Verwendung der Methoden show() und hide() in Jquery zum Animieren und Ausblenden von Bildern.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Methode zum Implementieren dreier Schichten überlappender Klicks zum Umschalten zwischen den Javascript-FähigkeitenNächster Artikel：JS-Methode zum Implementieren dreier Schichten überlappender Klicks zum Umschalten zwischen den Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen