jQuery animate function not working for display and -webkit-transform property

Question

The following code is working for all attribute except display and -webkit-transform attribute.

// Example 1 :

$(this).animate({
               "color":"#efbe5c",
               "display":"block"
},1000);


 // Example 2 :

$(this).animate({
              "-webkit-transform":"rotate(30deg)"
},1000);

Answer 1

From animate s documentation:

All animated properties should be animated to a single numeric value, except as noted below; 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, opacity would fade to the given value.

jQuery has an example of this on their animate page under "Basic Usage" to animate any element, such as a simple image:

HTML

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;" />

jQuery

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
}); 

You are also able to set a toggle value to the opacity like so:

$( "p" ).animate({
  height: "toggle", opacity: "toggle"
}, "slow" );

Answer 2

You should animate the opacity property of the element instead of it's display type.

first set it's css to display:block and opacity:0 to make it invisible, and then animate it's opacity property to opacity:1 .

$(this).css({"display":"block","opacity":0})animate({"opacity":"1"},1000);

Also colors cannot be animated without an external jQuery plugin.

Answer 3

The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

$("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
    }, 1500 );

Demo

Answer 4

you can put your code like this:

    $(this).animate({
                   "color":"#efbe5c"                   
    },1000).show();

Answer 5

Better to Use opacity

$(this).animate({
           "color":"#efbe5c",
           "opacity":"1",},1000);

Answer 6

Here's an example animating the opacity and the -webkit-transform .

Note that we're using the step callback for the -webkit-transform , since jQuery doesn't know how to animate rotate(30deg) out of the box:

var $test = $('#test');
$test.animate({
    opacity: 1
}, {
    step: function(now, fx) {
        $test.css('-webkit-transform', 'rotate(' + (30 * now) + 'deg)');
    }
}, 1000);

Demo: http://jsfiddle.net/CBWjh/