Question

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

// Example 1 :

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


 // Example 2 :

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

Answer 1

来自animate的文档：

所有动画属性都应设置为单个数值，除非如下所述; 大多数非数字属性都不能使用基本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: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 );

Demo

Answer 4

你可以像这样输入你的代码：

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

Answer 5

最好使用不透明度

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

Answer 6

以下是为opacity和-webkit-transform设置动画的示例。

请注意，我们正在使用step的{{1}}回调，因为jQuery不知道如何设置-webkit-transform开箱即用的动画：

rotate(30deg)

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

jQuery animate函数不适用于display和-webkit-transform属性

6 个答案: