Question

我有一些DIV，我正在应用一些基本的jQuery动画，例如鼠标移动时的动画和不透明度变化等。（例如：翻转图像时，透明的.png翻转也会淡入作为从底部向上滑动的文本框，当鼠标输出时都返回到前一阶段

现在我将overlay image属性设置为隐藏THROUGH jQuery，只是启用JavaScript以便它不会干扰功能。

$('.nametag').css({
    bottom: '-25px',
    opacity: 0.7
});

但是，当您加载页面时，您会看到文本框（.nametag）出现然后flickr离开。

如何隐藏闪烁效果，在页面加载之前加载jQuery CSS？

Answer 1

默认情况下，在CSS 中执行javascript所需的显示，但添加一些包含在<noscript>标记中的CSS，以便在禁用javascript时正确显示。

<style type="text/css">
    .nametag {
        bottom: -25px,
        opacity: 0.7
    }
</style>

<noscript>
<style type="text/css">
    .nametag {
        bottom: 0,
        opacity: 1
    }
</style>
</noscript>

编辑：更改了css以反映问题中的内容。

Answer 2

这通常归结为你的CSS及其加载方式，在关闭，隐藏等事情之前......

我使用过的最简单的解决方案，而不是隐藏等等，就是将你的位置设置在屏幕外，如：

.nametag {
position: relative;
left: -5000px;
}

然后在你动画或类似的东西时把它带回来消除闪烁

Answer 3

最简单的方法就是这样做....

CSS

.javascript .nametag {
    bottom: -25px;
    opacity: 0.7;
}

的jQuery

将其放在script元素的head元素中。

$(function() {
   $('body').addClass('javascript');
});

为了更快地添加类，您可以将它直接放在<body>标记之后（并且它不依赖于加载jQuery）。

<script type="text/javascript">
   document.body.className += ' javascript';
</script>

页面加载前的jQuery属性？

3 个答案:

CSS

的jQuery