CODEWITHSUNDEEP
javascriptjqueryanimation
Nrc
Nrc

Reputation: 9787

Delay and animate background

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/

Upvotes: 1

Views: 139

Answers (2)

Adrien Schuler
Adrien Schuler

Reputation: 2425

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.

Upvotes: 0

Jorge
Jorge

Reputation: 18237

Tried like this

$(document).ready(function(){  
   $("#foto1").click(function() {
       $(this).delay(1000).fadeOut(20000, function(){
        $("#foto1").css('background', 'none')   //<=== this remove the background after the animation stops
       });
    });    
})​

http://jsfiddle.net/78W3u/5/

Upvotes: 1

Related Questions