Javascript Girl
  1. Javascript Girl
  3. Retarder la suppression d'une classe dans Jquery
Intereting Posts
JS / JQuery: ajoute dynamiquement l'attribut "pattern" et "title" à l'entrée de formulaire Comment puis-je faire un test d'unité pour voir si angulaire est indéfini? Firefox et AJAX Junk après l'élément du document Comment obtenir toutes les propriétés d'un objet Javascript (sans connaître les clés)? Comment puis-je changer une variable JavaScript en utilisant Greasemonkey? Comment obtenir un texte d'ancrage dans une variable Session? Les votes publics et l'évitement du vote mutliple: utilisation de cookies ou IP? Une meilleure alternative à un iframe? Jsmart – Impossible d'obtenir le contenu du modèle (dans le temps?) Backbone.js: séparez la vue, la collection, le modèle au fichier js différent, ils ne pourraient pas se reconnaître JavaScript iteraire d'expression régulière pour extraire des groupes Comment désactiver Turbolinks dans une page spécifique? Jquery différé – "toujours" appelé au premier rejet DIV auto scroll Nombre de caractères Javascript

Retarder la suppression d'une classe dans Jquery

Duplication possible:
Jquery retarde l'exécution du script

J'écris un petit script qui, lors de la chargement de la page, attribue une sous-classe CSS à trois éléments. 800ms plus tard, je veux qu'il enlève cette sous-classe.

Je pensais que ce code pourrait le faire: 

<script type="text/javascript"> $(document).ready(function () { $("#rowone.one").addClass("pageLoad"); $("#rowtwo.three").addClass("pageLoad"); $("#rowthree.two").addClass("pageLoad"); .delay(800); $("#rowone.one").removeClass("pageLoad"); $("#rowtwo.three").removeClass("pageLoad"); $("#rowthree.two").removeClass("pageLoad"); }) </script>

Malheureusement, ce n'est pas le cas, aucune aide ne sera appréciée. Merci d'avance.

Vous pouvez utiliser la fonction setTimeout() :

Appelle une fonction ou exécute un extrait de code après un délai spécifié. 

 $(document).ready(function () { var $rows = $("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad"); setTimeout(function() { $rows.removeClass("pageLoad"); }, 800); });

Essayez ceci: aussi je ne suis pas sûr de savoir pourquoi personne ci-dessus utilisé l'expression enchaînée pourrait être que j'ai raté quelque chose

.delay() est uniquement conçu pour fonctionner avec des animations. Vous devrez recourir à l'utilisation de setTimeouts réguliers pour ce que vous faites:

J'espère que cela correspond à votre besoin :)

Code 

  $("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad"); setTimeout(function () { $("#rowone.one, #rowtwo.three, #rowthree.two").removeClass("pageLoad"); }, 800);

Utilisez setTimeout pour cela. 

 setTimeout(function() { $("#rowone.one").removeClass("pageLoad"); $("#rowtwo.three").removeClass("pageLoad"); $("#rowthree.two").removeClass("pageLoad"); }, 800);

Enroulez-le dans une fonction et passez l'état, de la manière suivante: 

 $(document).ready(function () { doClasses('add'); setTimeout(function() { doClasses('remove'); }, 800) function doClasses(state) { $("#rowone.one, #rowtwo.three, #rowthree.two")[state+'Class']("pageLoad"); } });

VIOLON

Maintenant, il est facile d'appeler, et plus facile de mettre un timeOut, et vous ne répétez pas le code.

J'ai supprimé: .one .three . two .one .three . two sélecteurs de classe et a ajouté la fonctionnalité de temporisation. devrait marcher. 

 <head> <style type="text/css"> .pageLoad{color:red;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <div id="rowone">rowone</div> <div id="rowtwo">rowtwo</div> <div id="rowthree">rowthree</div> <script type="text/javascript"> $(document).ready(function () { $("#rowone").addClass("pageLoad"); $("#rowtwo").addClass("pageLoad"); $("#rowthree").addClass("pageLoad"); }) function removeC(){ $("#rowone").removeClass("pageLoad"); $("#rowtwo").removeClass("pageLoad"); $("#rowthree").removeClass("pageLoad"); } setInterval(removeC, 5000); </script> </body>