jquery animate .css

我有一个脚本：

$('#hfont1').hover( function() { $(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover }, function() { $(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout } ); 

我怎么能动画它或减慢它，所以它不会是瞬间的？

Answer 1

只需使用.animate()而不是.css() （如果需要，可以使用持续时间），如下所示：

 $('#hfont1').hover(function() { $(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000); }, function() { $(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000); }); 

你可以在这里测试一下 。 但请注意，您需要使用jQuery颜色插件或jQuery UI来为颜色设置动画。 在上面，持续时间是1000毫秒，您可以更改它，或只是将其关闭默认的400毫秒持续时间。

Answer 2

您可以选择纯CSS解决方案：

 #hfont1 { transition: color 1s ease-in-out; -moz-transition: color 1s ease-in-out; /* FF 4 */ -webkit-transition: color 1s ease-in-out; /* Safari & Chrome */ -o-transition: color 1s ease-in-out; /* Opera */ } 

Answer 3

来自jQuery网站的示例动画大小和字体，但您可以轻松地修改它以满足您的需求

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

http://api.jquery.com/animate/

Answer 4

您实际上仍然可以使用“.css”并将css过渡应用于受影响的div。 因此，继续使用“.css”并将以下样式添加到“＃hfont1”的样式表中。 由于“.css”允许比“.animate”更多的属性，因此这始终是我首选的方法。

 #hfont1 { -webkit-transition: width 0.4s; transition: width 0.4s; } 

Answer 5

如果您需要将CSS与jQuery .animate()函数一起使用，则可以使用设置持续时间。

 $("#my_image").css({ 'left':'1000px', 6000, '' }); 

我们将持续时间属性设置为6000。

这将以千分之一秒为单位设置时间：6秒。

在持续时间之后，我们的下一个属性“缓和”会改变CSS的发生方式。

我们的定位设置为绝对。

绝对函数有两个默认值：’linear’和’swing’。

在这个例子中我使用线性。

它允许它使用均匀的速度。

另一个“摆动”允许指数速度增加。

有许多非常酷的属性可用于像弹跳等动画。

 $(document).ready(function(){ $("#my_image").css({ 'height': '100px', 'width':'100px', 'background-color':'#0000EE', 'position':'absolute' });// property than value $("#my_image").animate({ 'left':'1000px' },6000, 'linear', function(){ alert("Done Animating"); }); });