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

Posted 2023-02-21

【中文标题】已设置不透明度样式的 DIV 上的 Jquery fadeIn()

【英文标题】：Jquery fadeIn() on a DIV with already set opacity style

【发布时间】：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 中的图像加载后立即淡入。

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

【参考方案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 创建的，它现在还处于表单中

这个对我有用***.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 很好用！