jQuery Girl
  1. jQuery Girl
  3. Transition CSS3 pour mettre en évidence les nouveaux éléments créés dans JQuery
Intereting Posts
Le basculement des diapositives JQuery ne fonctionne pas avec les données peintes de manière dynamic (via ajax) après la première utilisation parsingr xml en utilisant jquery et ajax Charger le kernel jQuery asynchrone avec repli changer de classe d’une travée Impossible de se débarrasser d’un espace 2px bizarre entre l’image de mon enfant et son parent Formulaire d’envoi automatique JQuery AJAX Comment puis-je configurer un contextMenu pour mon jqGrid? Comment changer le titre de la boîte de dialog “File Upload” dans un navigateur? jQuery Mobile – impossible de lier pagebeforechange à l’identifiant de page? Jquery .on versus .live Comment formater la date et l’heure dans la légende Dygraphs en fonction des parameters régionaux de l’utilisateur Comment utiliser la maçonnerie plusieurs fois par page avec le même nom de classe? Glisser les divs horizontalement avec JQuery jQuery / JavaScript – Découper les espaces / tabulations entre deux éléments? Jquery Dropzone.js change la largeur de la vignette en 100%

Transition CSS3 pour mettre en évidence les nouveaux éléments créés dans JQuery

Je souhaite utiliser une transition de couleur CSS3 pour appliquer un effet de couleur fondu en surbrillance (jaune à transparent) aux nouveaux éléments ajoutés au balisage à l’aide de JQuery.

CSS 

#content div { background-color:transparent; -moz-transition:background-color 2s; -webkit-transition:background-color 2s; -o-transition:background-color 2s; transition:background-color 2s; } #content div.new { background-color:yellow; }

HTML 

 
 add new element

JS 

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); newElement.removeClass('new'); });

Lorsque je clique sur le lien, le nouvel élément est créé. Sa classe est “nouvelle” (couleur d’arrière-plan jaune) et elle est ajoutée au balisage HTML. Je devrais être en mesure de supprimer immédiatement la “nouvelle” classe pour déclencher la transition de couleur d’arrière-plan en transparent (ou toute autre couleur). Je me trompe évidemment, car la couleur de fond du nouvel élément est immédiatement montrée comme transparente, sans effet de transition. Je sais que je peux le faire dans l’interface utilisateur de JQuery, mais j’aimerais utiliser les transitions CSS3.

jsfiddle ici:

http://jsfiddle.net/paulaner/fvv5q/

J’ai réussi à faire en sorte que cela fonctionne avec l’animation CSS3: 

 @-webkit-keyframes yellow-fade { 0% {background: yellow;} 100% {background: none;} } @keyframes yellow-fade { 0% {background: yellow;} 100% {background: none;} } .highlight { -webkit-animation: yellow-fade 2s ease-in 1; animation: yellow-fade 2s ease-in 1; }

Appliquez simplement la classe de surbrillance à de nouveaux éléments: 

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); });

J’ai testé dans IE 10, Chrome, Safari et le dernier FF et cela fonctionne là-bas. Cela ne fonctionnera probablement pas dans IE 9 et au-dessous …

http://jsfiddle.net/nprather/WKSrV/3/

J’ai trouvé cette méthode dans Safari Books Online: http://my.safaribooksonline.com/9780132366847/ch05lev1sec2?link=f1184788-851e-4eb6-bb0b-61cb0fb7756d&cid=shareLink

Votre code est presque parfait. Il suffit de déclencher quelque chose pour que la transition fonctionne. Cela peut être fait en ajoutant 1 ligne de code à votre script. 

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); // sortinggger on focus on newly created div newElement.focus(); newElement.removeClass('new'); });

http://jsfiddle.net/UXfqd/

C’est un bidule laid, mais cela semble fonctionner. Je suis sûr qu’il existe un meilleur moyen. 

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); setTimeout(function(){ newElement.removeClass('new'); },0); });

http://jsfiddle.net/fvv5q/22/