Maison interface Web js tutoriel Exemple d'affichage d'animation et d'effet de masquage jQuery (avec téléchargement du code source de la démo)_jquery

Exemple d'affichage d'animation et d'effet de masquage jQuery (avec téléchargement du code source de la démo)_jquery

May 16, 2016 pm 03:22 PM
jquery 动画 显示 隐藏

Les exemples de cet article décrivent les effets d'affichage et de masquage de l'animation jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La capture d'écran de l'effet en cours d'exécution est la suivante :

Cliquez ici pour voir la Démo en ligne.

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

Le code spécifique est le suivant :

<!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>JQuery 动画显示和隐藏效果</title>
<script>
 /*
  1.$("页面元素类型").show(时间, 回调函数);以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数;指定时间后依次执行回调函数,页面上能找到几个,就连着执行几次。时间可以为毫秒数,也可以是slow,nomal,fast
  2.$("页面元素").toggle();切换此元素的显示状态。如果它是显示的,让它隐藏,如果它是隐藏的,让它显示。
  3.$("页面元素").slideDown(时间,回调函数)通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
  4.$("页面元素").fadeIn(时间,回调函数)通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
 */
</script>
<script language="javascript" src="jquery1.3.2.js" ></script>
<script>
 function test_show() {
  //$("#myImage").show(2000,function(){alert("演示完毕!");});
  $("img").show(2000,function(){alert("演示完毕!");});
 }
 function test_hide() {
  //$("#myImage").hide(2000,function(){alert("演示完毕!");});
  $("img").hide(2000,function(){alert("演示完毕!");});
 }
 function test_slideDown() {
  $("#myImage2").slideDown(500,function(){alert("滑动向下放大完毕");});
 }
 function test_slideUp() {
  $("#myImage2").slideUp(2000,function(){alert("滑动向上缩小完毕");});
 }
 function test_slideToggle() {
  $("#myImage2").slideToggle(1000,function(){alert("切换滑动效果完毕");});
 }
 function test_fadeIn() {
  $("#myImage3").fadeIn(2000,function(){alert("淡入完毕");});
 }
 function test_fadeOut() {
  $("#myImage3").fadeOut(2000,function(){alert("淡出完毕");});
 }
 function test_fadeTo() {
  $("#myImage3").fadeTo(2000,0.25,function(){alert("调整到指定透明度完毕");});
 }
</script>
</head>
<body>
<div>
 <input type="button" value="显示" onClick="$('p').show();" />
 <input type="button" value="隐藏" onClick="$('p').hide();" />
 |||     
 <input type="button" value="延时显示" onClick="test_show()" />
 <input type="button" value="延时隐藏" onClick="test_hide()" />
 <input type="button" value="切换元素的可见状态" onclick="$('#myImage1').toggle()" />
 |||     
 <input type="button" value="滑动向下放大" onClick="test_slideDown()" />
 <input type="button" value="滑动向上缩小" onClick="test_slideUp()" />
 <input type="button" value="切换滑动效果" onClick="test_slideToggle()" />
 |||     
 <input type="button" value="淡入" onClick="test_fadeIn()" />
 <input type="button" value="淡出" onClick="test_fadeOut()" />
 <input type="button" value="调整到指定透明度" onClick="test_fadeTo()" />
</div>
 <p style="display:none">Hello World!</p>
 <p style="display:none">Hello World!</p>
 <p style="display:none">Hello World!</p>
 <p style="display:none">Hello World!</p>
 <img id="myImage" src="images/11.jpg" style="display:none" />
 <img id="myImage1" src="images/1.jpg" style="display:none" />
 <img id="myImage2" src="images/2.jpg" style="display:none" />
 <img id="myImage3" src="images/3.jpg" style="display:none" />
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment masquer les amis WeChat sans les bloquer ni les supprimer ? Comment masquer les amis WeChat sans les bloquer ni les supprimer Comment masquer les amis WeChat sans les bloquer ni les supprimer ? Comment masquer les amis WeChat sans les bloquer ni les supprimer Mar 13, 2024 pm 07:19 PM

Comment masquer les amis WeChat sans les bloquer ni les supprimer ? De nombreux utilisateurs souhaitent masquer certains amis mais ne savent pas comment le faire. Laissez ce site présenter soigneusement aux utilisateurs comment masquer les amis WeChat sans les bloquer ni les supprimer. Méthodes pour masquer les amis WeChat sans bloquer ou supprimer Méthode 1 : 1. Ouvrez d'abord le logiciel WeChat, recherchez le carnet d'adresses sur la page WeChat et cliquez sur « Mon ». 2. Ensuite, nous entrons dans la page des paramètres. 3. Recherchez l'option « Confidentialité » et cliquez dessus. 4. Cliquez ensuite sur « Ne le laissez pas voir ». 5. Accédez à la page Ne pas la laisser voir et cliquez sur « + » pour vérifier les amis que vous souhaitez masquer.

Comment masquer les œuvres dans les courtes vidéos Douyin Comment masquer les œuvres vidéo personnelles Comment masquer les œuvres dans les courtes vidéos Douyin Comment masquer les œuvres vidéo personnelles Mar 12, 2024 pm 12:49 PM

Il existe de nombreuses courtes œuvres vidéo fournies dans le logiciel d'application vidéo courte Douyin. Vous pouvez les regarder à votre guise, et elles sont toutes fournies gratuitement en permanence. Différents types de chaînes vidéo en direct sont ouverts et tout le contenu vidéo est original. . Offrez à chacun la façon la plus satisfaisante de regarder. Entrez votre compte pour vous connecter en ligne, et une variété de courtes vidéos passionnantes seront diffusées, qui sont recommandées avec précision en fonction de ce que tout le monde regarde chaque jour. Vous pouvez également entrer dans la salle de diffusion en direct pour interagir et discuter avec le présentateur, vous faisant ressentir. plus heureux. Les œuvres téléchargées par des particuliers peuvent également être masquées. C'est très simple à configurer en un seul clic. Vous pouvez voir partout où vous glissez vers le haut et vers le bas pour voir les commentaires en temps réel d'innombrables internautes. L'éditeur propose désormais des courtes vidéos détaillées en ligne sur Douyin. Les utilisateurs demandent des moyens de cacher leurs œuvres vidéo personnelles. Première courte vidéo ouverte de Douyin

Comment configurer l'animation ppt pour entrer d'abord puis sortir Comment configurer l'animation ppt pour entrer d'abord puis sortir Mar 20, 2024 am 09:30 AM

Nous utilisons souvent ppt dans notre travail quotidien, alors connaissez-vous toutes les fonctions opérationnelles de ppt ? Par exemple : comment définir les effets d'animation dans ppt, comment définir les effets de commutation et quelle est la durée de l'effet de chaque animation ? Chaque diapositive peut-elle être lue automatiquement, entrer puis quitter l'animation ppt, etc. Dans le numéro d'aujourd'hui, je partagerai avec vous les étapes spécifiques d'entrée puis de sortie de l'animation ppt. Elles sont ci-dessous. 1. Tout d'abord, nous ouvrons ppt sur l'ordinateur, cliquez à l'extérieur de la zone de texte pour sélectionner la zone de texte (comme indiqué dans le cercle rouge dans la figure ci-dessous). 2. Ensuite, cliquez sur [Animation] dans la barre de menu et sélectionnez l'effet [Effacer] (comme indiqué dans le cercle rouge sur la figure). 3. Ensuite, cliquez sur [

Comment masquer Smart Island sur Xiaomi Mi 14 ? Comment masquer Smart Island sur Xiaomi Mi 14 ? Mar 18, 2024 pm 03:40 PM

En plus de l'étonnante configuration matérielle et des excellentes fonctions, le Xiaomi Mi 14 cache également un endroit fascinant : Smart Island. Ici, les utilisateurs peuvent profiter d’une personnalisation personnalisée et d’une expérience créative illimitée sur téléphone mobile. Mais tout le monde n’aime pas cette fonctionnalité, alors comment Xiaomi Mi 14 cache-t-il Smart Island ? Découvrons ensemble. Comment masquer Smart Island sur Xiaomi Mi 14 ? 1. Ouvrez l'application des paramètres du téléphone mobile Xiaomi 14. 2. Faites défiler pour trouver l'option « Fonctionnalités » et cliquez pour entrer. 3. Recherchez l'option « Masquer l'îlot intelligent » sur la page des fonctionnalités et activez-la. 4. Après avoir confirmé que le masquage de Smart Island est activé, revenez au bureau et vous verrez que Smart Island a été masqué.

Tutoriel détaillé sur le masquage des travaux sur Douyin Tutoriel détaillé sur le masquage des travaux sur Douyin Mar 25, 2024 pm 03:11 PM

1. Cliquez d'abord sur [+] pour tirer. 2. Cliquez ensuite sur la coche dans le coin inférieur droit pour confirmer la fin de la prise de vue. Cliquez] Suivant[, 3. Cliquez sur [Qui peut voir]. Sélectionnez simplement [Privé]. Scénario 2 : Le travail a été effectué. 1. Cliquez sur [Moi] et sélectionnez [Travail]. 2. Cliquez sur le logo [trois points] à droite. 3. Faites glisser votre doigt vers la gauche pour trouver [Paramètres d'autorisation], 4. Cliquez sur [Définir comme privé].

Comment nettoyer en profondeur les fichiers indésirables cachés sur votre téléphone (supprimer complètement les fichiers indésirables de la mémoire de votre téléphone) Comment nettoyer en profondeur les fichiers indésirables cachés sur votre téléphone (supprimer complètement les fichiers indésirables de la mémoire de votre téléphone) Jun 01, 2024 am 09:29 AM

Les téléphones mobiles sont devenus un élément indispensable de notre vie quotidienne, avec les progrès continus de la technologie et la popularité des smartphones. Ces fichiers indésirables occupent un espace de stockage précieux et, au fil du temps, une grande quantité de fichiers indésirables cachés s'accumulera dans le téléphone et entraînera cependant une dégradation des performances du téléphone. Savoir comment nettoyer en profondeur les fichiers indésirables cachés sur votre téléphone est devenu une connaissance essentielle pour tout utilisateur de téléphone mobile. 1. Rechercher et effacer les caches d'applications inutiles 2. Supprimer les applications qui ne sont plus utilisées 3. Nettoyer le cache photo et vidéo 4. Nettoyer complètement les fichiers temporaires et les dossiers de téléchargement 5. Organiser et nettoyer les enregistrements de contacts et de messages texte 6. Nettoyer le cache système 7. Désinstallez les applications système inutiles 8. Nettoyez le cache et l'historique du navigateur 9. Supprimez les fichiers de musique et audio non valides 10. Optimisez le système de fichiers du téléphone mobile

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Feb 28, 2024 pm 09:06 PM

Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : &lt

Comment créer un orage animé dans un orage ppt Comment créer un orage animé dans un orage ppt Mar 20, 2024 pm 02:41 PM

Parfois, nous rencontrons le besoin d'ajouter une animation à un ppt. Par exemple, si nous voulons créer un ppt d'orage et y ajouter des effets d'orage animés, que devons-nous faire ? Aujourd'hui, l'éditeur va vous présenter comment créer un orage animé en orage ppt. C'est en fait très simple, venez l'apprendre ! 1. Tout d'abord, nous ouvrons une page PPT, "Insérer" - "Forme" - "Forme de base" - "Forme éclair", comme indiqué sur l'image. 2. Dans l'onglet « Remplissage et ligne » à droite, sélectionnez « Remplissage » : blanc ; « Sélectionner » « Ligne » : noir, comme indiqué sur la figure. 3. Cliquez sur « Animation » – « Animation personnalisée » – « Ajouter un effet » – « Accentuation » – « Subtil » – « Sombre ou lumineux ».

See all articles