Question

我有一个非常奇怪的问题：我在localhost上的最新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>标记之前。

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

1 个答案: