Comment animer une modification de css en utilisant jQuery

Question

Est-il possible d'animer une modification de css en utilisant jquery?

Si quelqu'un serait assez aimable pour me donner un exemple, je serais très obligé. Essentiellement, j'essaye d'animer la technique des sprites en manipulant l'image de fond dans le CSS en utilisant jQuery. Le but est d'animer le hover afin que j'obtienne un joli fondu au lieu du simple switch abrupt produit par le code ci-dessous.

Voici où je suis:

HTML:

<h1 id="solomon">Solomon</h1> 

CSS:

body#default h1 { 
text-indent: -9999px; 
display: inline-block; 
height: 213px; 
} 
body#default h1#solomon { 
    background: transparent url(/images/S.gif) center top no-repeat; 
    width: 183px; 
    margin: 100px 0 0 216px; 
    } 

JQUERY:

$(function() { 
$('h1').hover(function() { 
    $(this).stop().css('background-position', 'center bottom'); 
}, function() { 
    $(this).stop().css('background-position', 'center top'); 
}); 
}); 

En ce moment la, il fonctionne très bien, mais il n'y a pas de jolie animation sur ho ver. Je veux savoir comment animer l'effet de changer le placement de l'image d'arrière-plan.

Merci à tous ceux qui prennent une photo. :)

---

J'espère que quelqu'un peut répondre à ma question sans me diriger vers un tutoriel? mon problème avec les tutoriels, c'est qu'ils me forcent tous à changer mon code HTML, que je suis assez bloqué en ce moment.

également, pourquoi la fonction d'animation ne fonctionne-t-elle pas dans mon exemple ci-dessus (@CMS)?

merci pour votre aide tout le monde! :)

Answer 1

This article vous initieront sur le Two Image Technique

[UPDATE]

trouvé un meilleur tutoriel pour vous: This article va vous montrer comment créer une image décoloration (comme un logo, par exemple)

Answer 2

Pour créer un effet de fondu, vous devez absolument positionner un élément l'un sur l'autre et animer l'opacité de l'élément pour faire apparaître l'image ci-dessous.

Étant donné que vous ne pouvez pas modifier le code HTML, je vous suggère de modifier le balisage en utilisant JavaScript en insérant de manière dynamique un intervalle qui révélera la nouvelle image pour votre balise H1.

J'ai mis en place un exemple de travail sur jsbin.com qui utilise votre balisage (c'est-à-dire uniquement la balise H1). J'ai utilisé l'image du tutoriel jqueryfordesigners.com (puisque c'est la mienne) afin que vous puissiez avoir une idée des changements CSS dont vous avez besoin.

Plus précisément, vous devez le style d'un SPAN imbriquée dans le H1 à être absolument positionné dans le H1 pour lui permettre de se fanent dans:

http://jsbin.com/adike/ (modifier: http://jsbin.com/adike/edit/)

Answer 3

Vous devez utiliser this plugin Animer la position de fond :)