Comment animer un div d`affichage ne bloquer en jquery

Cascading Style Sheets développeurs aide du site afficher, masquer et animer des objets sur un site Web. Si votre page a un élément DIV caché, vous pouvez utiliser javascript pour faire que DIV apparaissent graduellement en changeant son style d`affichage de "aucun" à "bloc" à l`aide d`une minuterie. Il faut un peu de connaissances de programmes pour être y arriver. En utilisant jQuery, une bibliothèque javascript multi-navigateur, vous pouvez générer ce effet de fondu impressionnant en utilisant une seule ligne de code.

Naviguez sur le site de jQuery et voir leur code jQuery. Il apparaît dans la fenêtre de votre navigateur. cliquons votre navigateur "Fichier" menu, puis cliquez sur "Enregistrer sous." le "Enregistrer sous" fenêtre ouvre. Cette fenêtre affiche les dossiers situés sur votre disque dur.

Recherchez le dossier qui contient un document HTML que vous souhaitez utiliser pour les tests. Double-cliquez sur ce dossier pour l`ouvrir, puis cliquez sur "sauvegarder" pour enregistrer le fichier jQuery dans ce dossier.

Lancez un éditeur HTML ou le Bloc-notes. Ouvrez votre document HTML et collez le code suivant dans le document de "tête" section:

Ajoutez le code HTML suivant à votre document de "" section:

Placez ce "animateStyle" fonction de document "scénario" section: fonction animateStyle (idDiv) {$ ("#" + IdDiv) Css ({ "afficher": "bloc", "opacité": "0" }).animer({ "opacité": "1" }, 3000) -} Cette fonction contient une seule instruction jQuery. le "CSS" fonction, vu au début de l`instruction, change de style d`affichage de la DIV "bloc," et définit ensuite son opacité à zéro. Cela permet de maintenir momentanément l`invisible DIV. le "animer" fonction anime la propriété d`opacité de DIV en changeant le niveau d`opacité de zéro à 100 pour cent. Cela crée l`effet de fade-in. La dernière valeur dans l`instruction, 3000 est la "durée" valeur. Il détermine le temps qu`il faut pour la DIV à fondu..

Collez le code CSS ci-dessous dans ce document "tête" section: Votre DIV, créé dans le "corps" section, les références de cette classe. Cette classe fait la DIV invisible en définissant sa valeur d`affichage "aucun."

Enregistrer ce document, et l`ouvrir dans un navigateur. La DIV contenant le paragraphe n`apparaît pas parce que la classe CSS, "divStyle" définit la valeur d`affichage pour "aucun. Clique le "Changer le style" bouton. Le code jQuery fonctionne et modifie le style d`affichage de la DIV "bloc." Cela rend la DIV contenant le fondu paragraphe lentement.

Pointe

• vérifier Modification de la valeur que vous aimez en changeant la durée de l`animation "3000" à un autre numéro. Des valeurs plus élevées font la course d`animation les plus longues et plus courtes pour l`accélérer. Vous devrez peut-être expérimenter avec ces valeurs pour en trouver un qui crée l`effet fade-in que vous désirez sans prendre trop de temps.

Les références

• lien W3Schools: jQuery CSS (Css) Méthode
• lien jQuery: Animer () API jQuery

A propos de l`auteur

Après une spécialisation en physique, Kevin Lee a commencé à écrire professionnellement en 1989, en tant que développeur de logiciels, il a également créé des articles techniques pour le Johnson Space Center. Aujourd`hui, ce cow-boy urbain Texas continue à manivelle logiciel de haute qualité ainsi que des articles non techniques couvrant une multitude de sujets divers allant du jeu à l`actualité.