jQuery不透明度动画不起作用，但任何其他动画都可以

Question

我有一个非常奇怪的问题：我在本地主机上的最新 Chrome 上使用 jQuery v11。虽然我设法在我的网站上使用带有任何元素和特性（包括不透明度）的 jQuery.animate()，但我有一个元素我不能。

我尝试在 $(document).ready() 函数内部和外部触发动画，它们都产生了相同的结果。我尝试了fadeTo、fadeIn/fadeOut、动画不透明度，所有这些都是一样的。动画开始，但经过一定百分比后，它就不再继续，而是直接跳到最后。 我也试过了，例如填充，它工作得很好。

我也在使用回调，但在这两种情况下删除或添加它都不会影响性能。另外，我已经浏览了几十个甚至更多的问题，所以我觉得我做了我的研究。

感谢您的帮助！

JavaScript：

$("#nb_copy").stop().animate({ opacity: 0 }, 300, function()
{
$(this).css("background-position", "-16px").stop().animate({ opacity: 1 }, 300);
});

HTML：

<div id='notes_buttons'>
<a id='nb_copy' data-info=''>C</a>
</div>

CSS：

div#notes_buttons
{
    width: 18px;
    position: absolute;
    top: 180px;
    right: -24px;
    opacity: 0;
    filter: alpha(opacity=0);
}

div#notes_buttons a
{
    cursor: pointer;
    display: block;
    width: 18px;
    height: 18px;
    margin-bottom: 1px;

    background: red url("/db/sprite.png") no-repeat;
    background-position: 0px 0px;
}

注意：我想在以下情况下使用此动画：我正在为父 div 的不透明度设置动画（看，这里可以使用...），然后当按下 nb_copy 按钮时，它会淡出，改变bg 位置并淡出。

如果我使用非常长的动画 (3000) 并添加延迟，第一个动画会在大约 40% 后中断，然后在 3000 毫秒结束后，它会计算延迟，然后是新动画。这样我对动画没有问题。另外，如果我不使用回调，它就可以工作。但是两人不知怎么打断了对方……

如果我只在回调中使用 .css，它会立即应用（背景位置）但动画运行流畅。

我已经在这么一件小事上花了大约 1.5 个小时......好吧，如果我在 JSfiddle 中重现上面的代码，它就可以工作：https://jsfiddle.net/g6z4xx16/。我也在用同一个按钮的Zeroclipboard，可能是这个问题吗？

如果我将它从 Zeroclipboard 巢中取出，并将其放入一个简单的点击触发器中，结果相同。

Answer 1

为什么要把简单的工作复杂化，改用fadeToggle()。

只需将您的代码更改为：

$("#nb_copy").fadeToggle(function()
{
$(this).css("background-position", "-16px").fadeToggle();
});

使用fadeToggle() 更好，因为animate() 用于制作自定义动画。

在您的代码中，将 <style> 标记放在 <script> 标记之前。