javascript - 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 按钮时，它会淡出，发生变化背景位置并淡出。

如果我使用很长的动画 (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()用于制作自定义动画。

In your code place your <style> tag before the <script> tag.