示例：

function resizedWindow(){       
    if($(window).width() < 400){
       $('#someId').animate({color:'red'},1000);    
    }
    else{
       $('#someId').animate({color:'blue'},1000);
    }
}

不起作用！

function resizedWindow(){       
    if($(window).width() < 400){
       $('#someId').css({'color':'red'});   
    }
    else{
       $('#someId').css({'color':'blue'});
    }
}

它有效！

Answer 1

您需要包含JQuery UI以设置颜色属性的动画。 JQuery本身无法为彩色属性设置动画。

Answer 2

正如Ananthan所说，如果没有jQuery UI，你无法使用jQuery动画制作颜色属性。

一种替代方法是使用.css（），并添加一个CSS转换：

#someId {
  -webkit-transition: color 1s linear; 
     -moz-transition: color 1s linear; 
       -o-transition: color 1s linear; 
          transition: color 1s linear; 
}

Answer 3

检查您的jQuery UI版本（如果您正在加载它，否则，请首先使用ananthan的答案并尝试加载jQuery UI）。我在JSFiddle中正在玩这个 - http://jsfiddle.net/5wZ2J/2/：

HTML：

<div  id="changeAnimate" style="color:red;">
    some red stuff
</div>
<div style="color:red;" id="changeme">
    some red stuff
</div>

JS：

$(function(){
    $("#changeAnimate").animate({color: "blue"}, 1000 );
    $("#changeme").css({'color':'blue'});   
});

我注意到有时它在某些jQuery / jQuery UI组合中变得挑剔。

Answer 4

谢谢大家的快速回复。感谢Robert提供了很好的建议，我实现了我想要的。这是一个代码。而且，它有效;）

$(document).ready(function(){

    $(window).bind('resize',resizedWindow);
});

    function resizedWindow(){   


        if($(window).width() < 400){
          $('#someId').css({
                color: 'red',
                transition:'all 3s linear'
        });

        }
        else{
          $('#someId').css({
                color: 'blue',
                transition:'all 3s linear'
        });
        }

    }

为什么animate（）不起作用？

示例：

4 个答案: