jQuery动画.css答案

【问题标题】：jquery animate .cssjQuery动画.css
【发布时间】：2011-05-19 19:50:38
【问题描述】：

我有一个脚本：

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

我怎样才能让它动画化或减慢它的速度，所以它不会是即时的？

【问题讨论】：

使用jQuery动画功能：api.jquery.com/animate

标签： javascript jquery jquery-animate

【解决方案1】：

只需使用.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 来为颜色设置动画。在上面，持续时间是 1000 毫秒，您可以更改它，或者将其保留为默认的 400 毫秒持续时间。

【讨论】：

如果 SO 有实时答案监控来观察人们的输入会很酷，但这将是一个巨大的资源消耗 ;)
您也可以使用 .filter(':not(:animated)') 在再次执行之前检查动画是否已完成运行。一个很好的例子可以在这里找到：css-tricks.com/examples/jQueryStop
您可能还想在动画部分之前包含一个.stop()，否则当您在元素上快速移动鼠标几次时，您会获得长时间的法兰绒效果。这是添加jsfiddle.net/GELTP/1586的小提琴

【解决方案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 */
}

【讨论】：

...忘记在末尾添加延迟，例如'transition: color 1s ease-in-out 2s;'，为动画添加 2 秒延迟。

【解决方案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/

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

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

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

在持续时间之后，我们的下一个属性“easing”会改变 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");
    });
});

【讨论】：