javascript - 在 css 类不起作用的每个元素上运行 javascript

Question

我试图在具有特定 CSS 类的 asp.net 页面上的每个元素上运行 javascript。我不是很精通javascript，所以我不知道为什么它不起作用。我正在动态创建控件并向它们添加 CSS 类，并且该类附加到页面上的静态控件。

我只想让控件在页面加载后淡入。

这是我的脚本:

<script type="text/javascript">
    $(document).ready(function () {
        $('.fadeInLoad').each(function (i, obj) {
            $(this).fadeIn();
        });
    });
</script>

这是我的 CSS:

.fadeInLoad
{
    color:#0d0d0d;
}

感谢您提供的任何帮助。

Answer 1

您必须在类规则中将display 设置为none。否则它会尝试淡入已经可见的元素。

此外，正如@Blazemonger 所指出的，只需在 jQuery 选择器调用上直接调用 .fadeIn()。

这是一个例子

$(document).ready(function() {
  $('.fadeInLoad').fadeIn(2000);
});

.fadeInLoad {
  color: #0d0d0d;
  display: none; /* This display needs to be here */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Does not fade in</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>