Javascript jquery 动画.css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4347104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery animate .css
提问by Plaski
I have a script:
我有一个脚本：
$('#hfont1').hover(
function() {
$(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover
},
function() {
$(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout
}
);
how can i animate it or slow it down, so it wont be instant ?
我怎样才能动画它或减慢它，所以它不会是即时的？
回答by Nick Craver
Just use .animate()instead of .css()(with a duration if you want), like this:
只需使用.animate()代替.css()（如果需要，可以使用持续时间），如下所示：
$('#hfont1').hover(function() {
$(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000);
}, function() {
$(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000);
});
You can test it here. Note though, you need either the jQuery color plugin, or jQuery UIincluded to animate the color. In the above, the duration is 1000ms, you can change it, or just leave it off for the default 400ms duration.
你可以在这里测试它。但请注意，您需要jQuery 颜色插件或包含的jQuery UI来为颜色设置动画。在上面，持续时间是 1000 毫秒，您可以更改它，或者将其保留为默认的 400 毫秒持续时间。
回答by blend
You could opt for a pure CSS solution:
您可以选择纯 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 */
}
回答by eroedig
You can actually still use ".css" and apply css transitions to the div being affected. So continue using ".css" and add the below styles to your stylesheet for "#hfont1". Since ".css" allows for a lot more properties than ".animate", this is always my preferred method.
您实际上仍然可以使用“.css”并将 css 转换应用于受影响的 div。所以继续使用“.css”并将以下样式添加到“#hfont1”的样式表中。由于“.css”允许比“.animate”更多的属性，这始终是我的首选方法。
#hfont1 {
-webkit-transition: width 0.4s;
transition: width 0.4s;
}
回答by user5474108
If you are needing to use CSS with the jQuery .animate()function, you can use set the duration.
如果您需要在 jQuery.animate()函数中使用 CSS ，您可以使用设置持续时间。
$("#my_image").css({
'left':'1000px',
6000, ''
});
We have the duration property set to 6000.
我们将持续时间属性设置为 6000。
This will set the time in thousandth of seconds: 6 seconds.
这将以千分之一秒为单位设置时间：6 秒。
After the duration our next property "easing" changes how our CSS happens.
在持续时间之后，我们的下一个属性“缓动”改变了我们的 CSS 发生的方式。
We have our positioning set to absolute.
我们将定位设置为绝对。
There are two default ones to the absolute function: 'linear' and 'swing'.
绝对函数有两个默认值：“线性”和“摆动”。
In this example I am using linear.
在这个例子中，我使用的是线性的。
It allows for it to use a even pace.
它允许它使用均匀的速度。
The other 'swing' allows for a exponential speed increase.
另一个“摆动”允许指数速度增加。
There are a bunch of really cool properties to use with animate like bounce, etc.
有很多非常酷的属性可用于动画，如反弹等。
$(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");
});
});
回答by Levi Hackwith
The example from jQuery's website animates size AND font but you could easily modify it to fit your needs
jQuery 网站上的示例对大小和字体进行了动画处理，但您可以轻松修改它以满足您的需要
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
