已设置不透明度样式的 DIV 上的 Jquery fadeIn()答案

【问题标题】：Jquery fadeIn() on a DIV with already set opacity style已设置不透明度样式的 DIV 上的 Jquery fadeIn()
【发布时间】：2012-12-17 04:03:29
【问题描述】：

我有一个 DIV，它是在 javascript 代码中动态创建的，具有以下样式集：

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;

我想使用 Jquery 淡入 DIV，但它不起作用。 DIV 仍然有 opacity:0。我不能在 div 上使用 fadeOut，因为它是动态创建的，我需要在 DIV 中的图像加载后立即淡入。

有没有办法解决这个问题。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

只需手动重置 CSS，然后将其淡入：

$("#myDiv").css({"-ms-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)", "-moz-opacity": 1, "-khtml-opacity": 1, "opacity": 1, "visibility": hidden}).fadeOut(0, function(){

     $(this).css({"visibility": "visible"}).fadeIn();
})

我经常将它用于需要开始隐藏然后淡入的事情。

【讨论】：

问题是可见性：可见立即显示内容，因此我看不到正在发生的淡入淡出
fadeOus 也不好，因为 div 还不是由 javascript 创建的，它现在还处于表单中
这个对我有用stackoverflow.com/questions/2435751/… - 你是这个意思吗？
大声笑，这正是我写的内容的简写版本，看看第一行的末尾，有一个淡出（0），然后可见性：可见和淡入在回调中:)

【解决方案2】：

请改用animate。

$('#your_div_id').animate({opacity: 1});

【讨论】：

我不能，这个 div 还没有创建，当它创建时它应该已经默认为不透明度 0
在您创建 div 后使用 animate 将其显示在图像加载后。除非我不明白——你是想显示 div 还是隐藏它？
当第一次将 DIV 插入到文档中时，它应该是不可见的。 DIV 包含一个图像。在插入DIV并加载图像后，这会触发一个需要淡入DIV和其中的图像的功能。 display:none 不起作用，因为它破坏了一些尺寸计算，我不会使用它。可见性：隐藏看起来不错，但是当我运行fadeIn它不起作用时，Jquery不会在可见性隐藏的DIV中淡入淡出。
对，所以从opacity: 0 开始，并在加载图像后更改opacity。

【解决方案3】：

您可以尝试使用display: none 加载图像，而不是弄乱不透明度，然后将其淡入。

【讨论】：

display none 不好，因为我做了一些在 display:none 状态下无法在 div 上完成的计算
我想过在 div 的 onload 中使用 javascript 吗？！

【解决方案4】：

你可以使用liveQuery（jquery插件）：https://github.com/brandonaaron/livequery

“实时查询通过绑定事件或自动触发匹配元素的回调来利用 jQuery 选择器的强大功能，即使在页面已加载并更新 DOM 之后也是如此。”

$('.someClass').livequery(function() { 
    /*a .someClass is created*/
    $(this).fadeIn();
});

liveQuery 很好用！

【讨论】：