动画不透明度无法正常工作答案

【问题标题】：Animating opacity not working properly动画不透明度无法正常工作
【发布时间】：2013-07-05 13:36:02
【问题描述】：

我正在尝试使用以下代码为元素的不透明度设置动画；

window.setInterval(function(){
    var target = $('.before'),
    opacity = target.css('opacity');

    target.fadeTo(600, (opacity==1?0:1))
    }, 5000);

当不透明度从 1 变为 0 时，它可以正常工作，但当不透明度从 0 变为 1 时，它根本没有动画，它只是立即从 0 变为 1。

我尝试了各种方法使用fadeTo() animate() toggle() 但无济于事

使用 fadeToggle() 可以按预期工作，但实际上并不是一个选项，因为它会在动画完成后向元素添加 display: none ，这会与页面布局混淆。

编辑

已解决：

我正在开发的网站使用的是 jQuery 1.4.4，更新到 1.10.1 解决了这个问题。

【问题讨论】：

嗯...会不会是浏览器的问题？在 Chrome 中尝试了您的代码，它工作正常：jsbin.com/epehul/2/edit

标签： jquery fade

【解决方案1】：

您打算支持哪些浏览器？这可以通过 css 轻松完成非常 - 只需使用 jQuery 添加/删除一个类，然后使用 css 转换来处理不透明度淡入淡出。不透明度开/关在 lte IE8 中仍然有效，但不会褪色。

或者，您可以使用 fadeToggle 并添加 'display: block !important;' （或您需要的任何显示）到元素。

【讨论】：

【解决方案2】：

尝试使用window.setInterval(function(){ $('.before').animate($('.before').css('opacity', 1?0:1), 1000); }, 5000);

【讨论】：

将 .val() 添加到末尾似乎会使动画完全停止工作。