Animated Jpeg?


I've prodced an animated GIF for my website banner but some of the image quallity is distorted.

What I want to do is use the original jpegs and animated them. I have tried

 This css3 but it doesn not work in opera or most versions of IE

<div id="cf">
	<img class="bottom" src="/tests/images/Stones.jpg" />
	<img class="top" src="/tests/images/Summit.jpg" />

Open in new window

@keyframes cf3FadeInOut {
	0% {
	45% {
	55% {
	100% {

#cf3 {
	animation-name: cf3FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: alternate;

Open in new window

Can anyone suggest a cross browser solution to animate 5 jpegs for a website banner?

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
you'll need javascript if you need cross-browserablity

Would you like a javascript solution?
EdAuthor Commented:
yes please- it doesn't have to be css
jQuery has some really excellent components for doing this.

I'd just use this :)
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Kiran Paul VJComputer EngineerCommented:
Try the code mentioned here, you can give the file names in an array.
Kyle HamiltonData ScientistCommented:
If you're going to use jquery, here is one I wrote for a continuous fadein/fadeout effect (I made it into a plugin, but right now the plugin only has a reveal effect :

But there's lots of others out there. jquery cycle is a good one.

For this one, you'll want to adjust the width, height, the names of the images, and the image path.

In the html, just add:

<div class="myslideshow"></div> where you want the slide show to appear.

var sw = 400; // slideshow width
   var sh = 300; // slideshow height
   var slideshow = $(".myslideshow"); // slideshow container element
   var images = ["img1.jpg", 
   var imagePath = "../images/";   
   var speed = 500; // how quickly it fades
   var slideInterval = 2500; // time between slide fades
// no need to edit below this line

   slideshow.css({width: sw, height: sh, "position":"relative", "overflow":"hidden"});
   var numImages = images.length;
   var slides = [];
   // make a slide object
   function Slide(w, h, img){
        var slide = $("<div>", {
                    position : "absolute",
                    width    : w,
                    height   : h,
                    opacity  : 0,
                    background: "url("+imagePath+img+") 0px 0px no-repeat"
            rel: img    
                return slide;
   for(var i = 0; i < numImages; i++){
    slides.push(new Slide(sw, sh, images[i]));
   slides[0].css({opacity : 1});
   var dotheslide = function(){
       slideshow.children("div").first().animate({opacity : 1}, {queue:false});
       slideshow.children("div").last().animate({opacity : 0}, speed, function(){

            slideshow.children("div").first().css({opacity : 1});
   var inter;
   inter = setInterval (function(){
   }, slideInterval);

// this will pause the slide show on mouse hover:
   slideshow.on("mouseenter", function(){
        inter = setInterval (function(){
        }, slideInterval);

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
EdAuthor Commented:
sorry for the delayed response but I have been ill.

Anyway, back to it now and this solution was perfect, thankyou
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.