How to animate a change in css using jQuery
Is it possible to animate a css change with jquery?
If anyone would be kind enough to provide me with an example, I would be greatly obliged.
Basically I am trying to animate the sprite technique by manipulating the background image in css using jQuery. The goal is to animate the hover to get a nice fade out, not just the cool switch created by the code below.
This is where I am:
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');
});
});
This is working fine at the moment, but there is no attractive hover animation. I want to know how to animate the background image placement switching effect.
Thanks whoever did this. :)
I hope someone can answer my question without pointing me to a tutorial? my problem with the tutorials is that they all force me to change my html which I am pretty locked into.
also why is animate function not working in my example above (@CMS)?
Thanks for your help everyone! :)
source to share
To create a fade effect, you need to absolutely place one element on top of the other and animate the element's opacity down to reveal the image below.
Since you cannot change the HTML, I suggest that you change the markup with JavaScript, dynamically inserting a range that will show the new image for your H1 tag.
I put together a working example at jsbin.com that uses your markup (i.e. only the H1 tag). I used an image from the jqueryfordesigners.com tutorial (since it's mine) so you can get an idea of the required CSS changes.
In particular, you need to style the nested SPANs in the H1 so that they are absolutely positioned inside the H1 so that it disappears into:
http://jsbin.com/adike/ (for editing: http://jsbin.com/adike/edit/ )
source to share
This article will help you get started withTwo Image Technique
[UPDATE]
Found the best tutorial for you: This article will show you how to create a fading image (like a logo)
source to share