jQuery Animate（）和BackgroundColor [英] jQuery Animate() and BackgroundColor

问题描述

我试图通过使用JQuery更改背景颜色创建一个简单的脉冲效果。但是，我无法获得backgroundColor的动画效果。

  function show_user（dnid）{
 / * dnid is HTML的div ID。 * / 
 if（！$（dnid）.is（'：visible'））{
 $（dnid）.show（）
} 
 $ '）.animate（{scrollTop：$（dnid）.offset（）。top}）; 
 $（dnid）.animate（{backgroundColor：＃db1a35}，1200）; 
} 
  

奇怪的是，这个替代动画工作原理：

  $（dnid）.animate（{opacity：toggle}，1200）; 
  

但这不是我想要的。

此外，show（）和滚动功能的功能工作正常。

此链接调用上面的函数
< a href = ＃onclick =javascript：show_user（'＃9e4cde88b90004ea722e9e129ed83747'）>找到我< / a>

背景颜色？

=========

感谢大家的帮助。很多类似的答案。

< script src =



< http://code.jquery.com/color/jquery.color-2.1.2.min.js>< / script>

然后在我的show_user函数中滚动动画后。

  var bgcol = $（dnid）.css背景颜色'）; 
 $（dnid）.animate（{backgroundColor：＃db1a35}，2000）; 
 $（dnid）.animate（{backgroundColor：bgcol}，2000）; 
  

这会给用户一个比较快的红色脉搏。

再次感谢您的帮助。

解决方案

默认情况下，jQuery不能为颜色设置动画。要动画颜色，请使用官方的 jQuery.Color 插件。

所有动画属性都应该动画为单个数值，除非如下所述;大多数非数字属性不能使用基本的jQuery功能进行动画处理（例如，宽度，高度或左侧可以是动画，但背景颜色不能，除非使用jQuery.Color（）插件）。

源

I'm trying to create a simple pulse effect by changing the background color using JQuery. However, I can't get the backgroundColor to animate.

function show_user(dnid) {
    /* dnid is HTML ID of a div. */
    if (! $(dnid).is(':visible')) {
        $(dnid).show()
    }
    $('html, body').animate({scrollTop: $(dnid).offset().top});
    $(dnid).animate({backgroundColor: "#db1a35"}, 1200);
}

What's strange is that this alternate animation works:

$(dnid).animate({opacity: "toggle"}, 1200);

But it's not what I want at all.

Additionally the show() and scroll functionality in the function work fine. It's just the background color animation that doesn't.

The function above is called by this link <a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>

Could someone help me animate the background color?

=========

Thanks everyone for the help. Lots of similar answers. Here's what I ended up with

In my header

<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

Then in my show_user function right after the scroll animation.

var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);

That gives a relatively quick red "pulse" that will draw the user's eyes.

Again, thanks for the help.

解决方案

jQuery cannot animate colours by default. In order to animate colours, use the official jQuery.Color plugin.

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

Source

这篇关于jQuery Animate（）和BackgroundColor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！