Question

I want to make a background image disappear. It works.
But it fails when I try to delay it or to animate it.
Any guess what it’s wrong and how to do it well?

$(function(){      
    $("#foto1").click(function() {
        $("#foto1").delay(1000).animate.css({"background":"none"},2000);
    }); 
})

http://jsfiddle.net/78W3u/

Answer 1

This will fadeout an image : http://jsfiddle.net/2MQeC/

$(function(){      
    $("#foto1").click(function() {
        $("#foto1").fadeOut(2000);
    }); 
})​

— EDIT —

This will animate the background independently of the image : http://jsfiddle.net/2MQeC/1/

#foto1 { 
    background: black; 
  -webkit-transition: background 1.5s ease;  /* Saf3.2+, Chrome */
     -moz-transition: background 1.5s ease;  /* FF4+ */
      -ms-transition: background 1.5s ease;  /* IE10 */
       -o-transition: background 1.5s ease;  /* Opera 10.5+ */
          transition: background 1.5s ease;
}

​

$(function(){      
    $("#foto1").click(function(){
        $this = $(this);
        setTimeout(function(){
            $this.css({
                background: 'green'
            });
        }, 1000); // delay
    }); 
})​;

As you can see, this rely on CSS3 transitions for background animation.

A better cross browser solution would be to use jQuery .animate() function.
But you can’t modify as many properties as .css() could.

Extract from jQuery .animate() documentation :

Most properties that are non-numeric cannot be animated using basic
jQuery functionality (For example, width, height, or left can be
animated but background-color cannot be, unless the
jQuery.Color() plugin is used).

However, you could change your markup and separate your image and your background in two div who are superimposed. This could simplify what you are trying to do.