Maison > Article > interface Web > Utilisez JQ pour écrire l'effet de fondu d'entrée et de sortie le plus basique avec la démonstration animation_jquery

Utilisez JQ pour écrire l'effet de fondu d'entrée et de sortie le plus basique avec la démonstration animation_jquery

WBOYoriginal: 2016-05-16 16:32:271177parcourir

jQuery est une bibliothèque JavaScript, qui est une extension de JavaScript, utilisée pour répondre aux besoins croissants de différents effets spéciaux. Son essence est JavaScript

Écrivons un programme JQ de base pour illustrer JQ.

1. Objectifs de base

Il y a les trois boutons suivants sur la page Web. L'un peut uniquement masquer le texte, l'autre peut uniquement afficher le texte et l'autre peut masquer et afficher le texte en même temps. Cliquez une fois pour afficher, cliquez à nouveau pour masquer, et le bouton suivant est affiché. le cycle est sans fin.

2. Processus de production

1. Tout d'abord, vous devez télécharger un fichier de support JQ depuis le site officiel de JQ et le placer dans le dossier de votre site. Ce fichier de support est jQuery1.11. Vous pouvez accéder au site officiel de jQuery pour télécharger jQuery1.11 qui est compatible avec l'ancien navigateur IE6, mais pas jQuery2 qui n'est pas compatible avec l'ancien navigateur IE6.

2. Le code complet de la page Web est le suivant, divisé en fragments pour explication :

<!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" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
$(document).ready(function() { 
$("#hide").click(function() { 
$("#text").hide(); 
}); 
$("#show").click(function() { 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
$("#text").toggle(); 
}); 
}); 
</script> 

<!-- 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

--> 

<title>JQ淡出与显示</title> 

</head> 
<body> 

<p id="text"> 
被折腾的文本 
</p> 

<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body> 

</html>

(1)1ef4b25f1615c541b0895ef133370894

<head>部分主要是实现核心代码部分，放在后面来讲，先说<body>部分

<body> 
<!--这是定义一段ID为text的文本，便于脚本控制--> 
<p id="text"> 
被折腾的文本 
</p> 

<!--分别设置ID为hide,show,toggle的按钮--> 
<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body>

(2)f775363a88c51a73816212751e1d5e2d

<head> 
<!--网页的编码，声明要使用JQ--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
<!--JQ的代码编写首先要用$(document).ready(function() {});去定义一个总函数，缺少这个函数提供的框架之后的东西无法执行--> 
$(document).ready(function() { 
<!--之后再于这个函数内编写需要的函数--> 
<!--对于ID为hide这个按钮的click动作进行函数的调用，之后的动作依旧放在这个一个函数的里面--> 
$("#hide").click(function() { 
<!--隐藏ID的为text的文本--> 
$("#text").hide(); 
}); 
$("#show").click(function() { 
<!--显示ID的为text的文本--> 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
<!--在隐藏与显示之间切换ID的为text的文本--> 
$("#text").toggle(); 
}); 
}); 
</script> 

lt;!--这段控制默认是显示还是不显示 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

-> 

<title>JQ淡出与显示</title> 

</head>

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：Navigation corrigée en haut basée sur jquery répond à la barre de défilement du navigateur events_jqueryArticle suivant：Navigation corrigée en haut basée sur jquery répond à la barre de défilement du navigateur events_jquery

Articles Liés

Voir plus