recherche

Maison  >  Article  >  interface Web  >  Utilisez les méthodes show() et hide() pour animer et masquer des images dans Jquery_jquery

Utilisez les méthodes show() et hide() pour animer et masquer des images dans Jquery_jquery

WBOY
WBOYoriginal
2016-05-16 15:37:181513parcourir

(1) Description de la fonction

Cliquez sur la connexion "Afficher" sur la page pour afficher une image de manière animée via la méthode show(). En même temps, une fonction de rappel est exécutée dans la méthode pour changer le style de bordure de l'image ; l'image affichée Quand, utilisez hide() pour masquer l'image de manière animée.

(2) Code de mise en œuvre

<!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="Utilisez les méthodes show() et hide() pour animer et masquer des images dans Jquery_jquery" >
</body>
</html>

Animation affichée lentement

Utilisez les méthodes show() et hide() pour animer et masquer des images dans Jquery_jquery

Explication détaillée de l'utilisation de la méthode jquery hide(), show()

Grammaire

$(selector).hide(speed,callback)
la vitesse a trois paramètres d'effet • millisecondes (par exemple 1500)
•"lent"
•"normal"
•"rapide"

Lors du réglage de la vitesse, l'élément changera progressivement sa hauteur, sa largeur, sa marge, son remplissage et sa transparence au fur et à mesure qu'il passe de visible à caché.

Exemple

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

Il s'agit d'un affichage et d'un masquage super simple Si nous voulons avoir un effet, il suffit d'ajouter du temps ou des paramètres pour masquer ou afficher 

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

Enfin, résumez l'effet d'affichage et de masquage obtenu par afficher et masquer

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

Le contenu ci-dessus est l'utilisation des méthodes show() et hide() dans Jquery pour animer et masquer des images. J'espère que vous l'aimerez.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode JS pour implémenter trois couches de clics qui se chevauchent pour basculer entre elles_compétences javascriptArticle suivant：Méthode JS pour implémenter trois couches de clics qui se chevauchent pour basculer entre elles_compétences javascript

Articles Liés

Voir plus