jQuery动画函数不工作的显示和-webkit-transform属性

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

本文关键字：显示 -webkit-transform 属性 工作 动画 函数 jQuery      更新时间：2023-09-26

以下代码适用于所有属性，除了display和-webkit-transform属性。

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

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

你应该动画元素的不透明度属性，而不是它的显示类型。

首先将它的css设置为display:block和opacity:0，使其不可见，然后将它的不透明度属性设置为opacity:1。

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

如果没有外部的jQuery插件，颜色也不能动画

摘自animate的文档:

所有的动画属性都应该动画为一个单一的数值，除下列情况外;大多数非数字属性不能动画使用基本的jQuery功能(例如，宽度，高度，或者左边可以是动画，但是背景色不能是，除非使用jQuery.Color()插件).

但是，opacity会逐渐淡出到给定的值。

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

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

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

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

你可以这样写代码:

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

最好使用不透明度

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

下面是一个动画化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/

相关文章：