comment mettre une div pour quelques secondes à l'aide de jQuery

Je veux ajouter ce qui suit à la page:

Lorsqu'un div est cliqué, je veux:

  1. changer la couleur d'arrière-plan de l'cliqué sur un div pour quelques secondes
  2. revenir à l'original en couleur d'arrière-plan après quelques secondes

Je veux le faire uniquement à l'aide de jQuery fonctions disponibles - à-dire ne pas à l'aide d'un plugin ou quoi que ce soit d'autre. Je suis relativement nouveau à jQuery, mais je pense qu'une solution possible consiste à utiliser de l'évolution de la classe de la sélection de la div et l'aide d'une minuterie.

Je ne suis pas sûr de la façon de mettre tout cela ensemble. Quelqu'un peut-il fournir quelques lignes qui montrent comment le faire?

C'est ce que j'ai à ce jour:

$(function(){
 $('div.highlightable').click(function(){
    //change background color via CSS class
    $(this).addClass('highlighted);
    //set a timer to remove the highlighted class after N seconds .... how?
 });
});

OriginalL'auteur morpheous | 2010-07-25

  1. 24

    Une façon est d'aller à ce sujet comme ceci en utilisant setTimeout:

    $(function () {
    $('div.highlightable').click(function () {
        $(this).addClass('highlighted');
        setTimeout(function () {
            $('div.highlightable').removeClass('highlighted');
        }, 2000);
    });
});
    Exactement ce que je cherchais !

    OriginalL'auteur Sarfraz

  2. 6

    Je pense que vous êtes à la recherche pour le mettre en Évidence effet.

    http://docs.jquery.com/UI/Effects/Highlight

    Cela ne fonctionne pas comme prévu, car il permet de masquer un div après l'effet est terminé. Au lieu de cela, vous voulez faire quelque chose comme: $(this).effect("highlight", {}, 1000); de sorte que l'élément n'est pas caché.
    pas la peine de le jquery ui dépendance si vous n'êtes pas déjà de l'utiliser.

    OriginalL'auteur Manaf Abu.Rous

  3. 4

    Vous pouvez utiliser le setTimeout fonction:

    $('div.highlightable').click(function(){
    var $this = $(this);
    //change background color via CSS class
    $this.addClass('highlighted');
    //set a timeout that will revert back class after 5 seconds:
    window.setTimeout(function() {
        $this.removeClass('highlighted');
    }, 5 * 1000);
});

    OriginalL'auteur Darin Dimitrov

  4. 0

    Pour la postérité, voici une réponse impliquant le jQuery file d'attente() fonction.

    $('.menul').addClass('red').delay(1000).queue(function(next){
   $(this).removeClass('red');
   next();
});

    À partir de: https://forum.jquery.com/topic/inserting-a-delay-between-adding-and-removing-a-class#14737000002257187

    OriginalL'auteur Sverrir Sigmundarson