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

admin管理员组

文章数量:1291009

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);

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);

• javascript
• jquery

Share Improve this question Follow edited Apr 4, 2013 at 12:32 Shivaji Ranaware asked Apr 4, 2013 at 12:24 Shivaji RanawareShivaji Ranaware 16911 silver badge99 bronze badges 6

• on which event u want to animate – Nikhil D Commented Apr 4, 2013 at 12:26
• Are you trying to fade in/out? You should play with opacity instead. Animating display doesn't really make sense because it doesn't make sense to animate between inline and block, for example. – jmar777 Commented Apr 4, 2013 at 12:26
• How do you animate display? Are you sure you should'nt be animating the opacity ? – adeneo Commented Apr 4, 2013 at 12:26
• @jmar777 : I used fadeIn / fadeOut for display.It works. But for "-webkit-transform" why animate not working. Any Idea ? – Shivaji Ranaware Commented Apr 4, 2013 at 13:12
• 1 @ShivajiRanaware Because jQuery can't handle non-numeric animations (i.e., it doesn't know what to do with rotate(30deg). There may be a plugin for that, or you can update the property manually using the step callback. – jmar777 Commented Apr 4, 2013 at 13:14

 |  Show 1 more ment

6 Answers 6

Sorted by: Reset to default 3

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.

From animates 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 plete.
  });
}); 

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

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

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

you can put your code like this:

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

Better to Use opacity

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

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/CBWjh/

本文标签： javascriptjQuery animate function not working for display and webkittransform propertyStack Overflow