javascript - jQuery动画功能不适用于显示和-webkit-transform属性

Question

以下代码适用于除 display 和 -webkit-transform 属性之外的所有属性。

// Example 1 :

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


 // Example 2 :

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

Answer 1

来自animates 文档：

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以进行动画处理，但背景颜色不能进行动画处理，除非使用 jQuery.Color() 插件）。

但是，opacity会褪色到给定的值。

jQuery 在他们的页面上的“基本用法”下有一个这样的例子animate来动画任何元素，比如一个简单的图像：

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

您还可以设置一个toggle值，opacity如下所示：

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

Answer 2

您应该为元素的 opacity 属性而不是它的显示类型设置动画。

首先将它的 css 设置为display:block并opacity:0使其不可见，然后将其 opacity 属性设置为opacity:1.

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

如果没有外部 jQuery 插件，颜色也无法动画。

Answer 3

.animate() 方法允许我们在任何数字 CSS 属性上创建动画效果。唯一需要的参数是 CSS 属性的普通对象。这个对象类似于可以发送到 .css() 方法的对象，只是属性的范围更受限制。

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

演示

Answer 4

opacity这是一个为和 设置动画的示例-webkit-transform。

请注意，我们正在使用step回调-webkit-transform函数，因为 jQuery 不知道如何rotate(30deg)开箱即用地制作动画：

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

演示：http: //jsfiddle.net/CBWjh/

Answer 5

你可以这样写你的代码：

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

Answer 6

更好地使用不透明度

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