Simple jQuery Animation

Question

I've posted similar question but no response.

I have a jQuery Mobile site and I need a simple animation in my header.

See my JSfiddle here: http://jsfiddle.net/motocomdigital/twGHC/39/

I have a logo in my header which is width:284px; height:58px; and it's a 1px Transparent GIF - being replaced with a background image.

My background image contains the two slides that I need a cycle fade on.

I need the logo to cycle (fade in/out) between these 2 css rules on my image:

div#header-logo a img {
    background-position: top;
}

and

div#header-logo a img {
    background-position: bottom;
} 

I think the jquery css property is { backgroundPosition, 'bottom' } and { backgroundPosition, 'top' }

Each slide can be shown for 2seconds before cycling.

Can someone tell me if this is possible just using jQuery Mobile? and not having to introduce a new plugin. Trying to keep this as light as possible with a function.

Any help would be amazing thanks!

My HTML

<div id="header-logo">

     <a href="#home" data-direction="reverse">
          <img src="x.gif" alt="" style="width:284px;height:58px;" />
     </a>    

</div>

My CSS

div#header-logo {
    bottom: 0;
    position: relative;
    margin: 14px auto 0;
    padding: 0;
    width: 282px;
    height: 73px;
}

div#header-logo a img {
    width: 284px;
    height: 58px;
    background-image: url('http://www.freeimagehosting.net/newuploads/85137.png');
    background-size: 100% 200%;
    background-position: top;
    background-color: red;
}

See my JSfiddle here if you want to experiement... http://jsfiddle.net/motocomdigital/twGHC/39/

UPDATE: First idea seems to work fine, thanks Andy! See here.. http://jsfiddle.net/motocomdigital/twGHC/40/

Can it get any lighter?

Answer 1

How about positioning a clone of the image, with the clone having background-position: bottom set and then a 2 second interval to .animate() the opacity of each image? Might not be the cleanest way to do it but dropping this code into your fiddle works for me in Chrome 14 without any other CSS or HTML changes.

var anchor = $('div#header-logo a');
var img = anchor.find('img');
var position = img.position();
var bottom = img.clone();
bottom.css({position:'absolute',top:position.top,backgroundPosition:'bottom','opacity':0});
$('div#header-logo a').append(bottom);

var cycleHeader = setInterval(function(){
    img.animate({'opacity':img.css('opacity') == 0 ? 1 : 0});
    bottom.animate({'opacity':bottom.css('opacity') == 0 ? 1 : 0});
}, 2000);