我有一个脚本：
$('#hfont1').hover(
function() {
$(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover
},
function() {
$(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout
}
);
我怎么能动画或减慢它，所以它不会是即时的？
80
只需使用.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。但是请注意，您需要包含jQuery color plugin或jQuery UI来为颜色设置动画。在上面的示例中，持续时间为 1000ms，您可以更改它，也可以将其保留为默认的 400ms 持续时间。
8
你可以选择一个纯 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 */
}
0
jQuery 网站的示例对大小和字体进行动画处理，但您可以轻松修改它以满足您的需求
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
0
您实际上仍然可以使用“.css”并将 css 转换应用于受影响的 div。所以继续使用“.css”并将以下样式添加到“# hfont1”的样式表中。由于“.css”允许比“.animate”更多的属性，这始终是我的首选方法。
#hfont1 {
-webkit-transition: width 0.4s;
transition: width 0.4s;
}
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（77条）