Comment modifier temporairement la couleur d'arrière-plan d'un nouvel élément ajouté au DOM?

Je développe une page Web (en utilisant jquery) où l'utilisateur peut ajouter de nouveaux contrôles graphiques au DOM (par exemple, l'utilisateur clique sur un lien et un nouveau DIV est créé). Comment puis-je changer la couleur d'arrière-plan de ce nouvel élément pendant quelques secondes (puis il reviendra à sa couleur d'origine)? Je veux changer la couleur pour donner un indicateur visuel à l'utilisateur sur l'emplacement du nouvel élément.Comment modifier temporairement la couleur d'arrière-plan d'un nouvel élément ajouté au DOM?

Merci.

Source

2009-06-06 Anthony

Il y a beaucoup de bibliothèques qui feront cela (et beaucoup d'autres effets graphiques impressionnants) pour vous, comme jQuery, MooTools, et Prototype. Consultez this StackOverflow question pour savoir comment utiliser jQuery pour retirer cet effet, par exemple. Plus généralement, vous utiliserez la méthode setTimeout de Javascript pour définir la couleur d'un élément pendant un moment, puis, lorsque le délai d'attente sera écoulé, redéfinissez-la sur sa couleur originale/appropriée.

Source

2009-06-06 12:39:10

Il semble que la solution la plus simple pour ce faire sans utiliser de plugin consiste à utiliser le 'Highlight' feature de jquery UI.

Source

2009-06-06 12:46:23 Anthony

Voici un exemple utilisant jQuery.animate(). Il n'utilise pas les couleurs, mais l'opacité:

<!DOCTYPE html> 

<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
div { 
width: 300px; 
height: 300px; 
border: solid #000 1px; 
} 
</style> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("div").click(function() { 
     $("<span>Hello there!</span>").appendTo(this) 
       .animate({ 
        opacity: 0 
       }, 500, function() { 
        $(this).animate({ 
         opacity: 1, 
        }, 500); 
       }); 
    }); 
}); 
</script> 
</head> 
<body> 

<div></div> 

</body> 
</html>

Source

2009-06-06 13:08:51

Comment modifier temporairement la couleur d'arrière-plan d'un nouvel élément ajouté au DOM?

Répondre

Questions connexes