jQuery淡入效果会将元素的透明度留在0。

Question

我有一个与“.fadeIn()”有关的奇怪行为。

如果我写：

$('#MyDiv').show();

显示得很好。

然而，如果我写

$('#MyDiv').fadeIn(400);

显示出来了，但不透明（opacity）！

前一行是：

$('#MyDiv').hide()
    .html(TheHTML)
    .css('top', 0);

更新： 如果我写了$('#MyDiv').show(400);

这个div的不透明度也会保持为0。

- frenchie

---

如果一个元素的opacity:0 === 不可见。但你说：“这个div显示了，但是opacity为0！”我真的不理解。 - Roko C. Buljan

TheHTML 是从哪里来的？问题肯定来自其他地方，比如您的 div 是空的，因此其高度和宽度等于 0 或类似的情况。 - romainberger

Answer 1

当你的div被隐藏时，一些CSS正在覆盖它。最好将你的div的opacity样式设置为1。

否则，执行以下操作：

$('#MyDiv').css('opacity','1');

在您的fadeIn调用之后...

- Kabilan S

---

CSS的不透明度取值范围是0到1。100吗？有点大了。 - designermonkey

Answer 2

尝试使用 jQuery 的 .fadeTo 函数。

.fadeTo( duration, opacity [, callback] )  
.fadeTo( duration, opacity [, easing] [, callback] )  

示例：

$('#book').fadeTo('slow', 0.5, function() {
  // Animation complete.
});

- Tooraj Jam

Answer 3

以下内容将使其按您所需的方式可见。

$('#MyDiv').animate({
  opacity: 1
},400);

你可以尝试以下方法：

$('#MyDiv').fadeIn(400, function(){
    $(this).css('opacity', 1)
});

演示

但我认为你的也应该能正常工作。请看这里

- thecodeparadox

---

fadeIn 不是自己动画透明度吗？所以问题可能出在其他地方。 - Prasenjit Kumar Nag

Answer 4

检查是否有

opacity: 0 !important;

//or

opacity: 0;

在这种情况下，您必须手动更改CSS中的opacity，像这样

$('#MyDiv').fadeIn(400,function(){
   $(this).css('opacity',1);
});

请查看fiddle。第一个div永远不会出现。

- Prasenjit Kumar Nag