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

Posted 2023-05-08

【中文标题】jQuery不透明度动画不起作用，但任何其他动画都可以

【英文标题】：jQuery opacity animation not working but any other animation does

【发布时间】：2015-12-03 11:53:18

【问题描述】：

我有一个非常奇怪的问题：我在本地主机上的最新 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 巢中取出，并将其放入一个简单的点击触发器中，结果相同。

【问题讨论】：

你可以使用 fadeToggle() 代替。

遗憾的是没有区别，Arjun :( 完全一样的故事。

添加了一些新内容。看看吧。也许这可以解决你的问题。????????????

好吧，最后我成功地使用了 setTimeOut()。之后我又尝试了很多组合（删除 CSS、HTML 和 JS 元素），但没有使用切换、淡入淡出和动画。谢谢你的帮助:)

【参考方案1】：

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

只需将您的代码更改为：

$("#nb_copy").fadeToggle(function()

$(this).css("background-position", "-16px").fadeToggle();
);

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

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

【讨论】：

我完全不知道为什么，但是虽然它在 JSFiddle 中有效，但在我的代码中却无效。不过感谢您的回答:)

顺便说一句，这是一个很好的教训，可以简化我下次的工作:)

我在头上有这个：<link rel="stylesheet" type="text/css" href="/db/style.css" /> <script type="text/javascript" src="/db/library.js"></script> 其余的在正文的末尾（打印出来，不在单独的文件中）o_o