页面加载后的jQuery addClass [英] Jquery addClass after page load

问题描述

我想知道为什么页面渲染后执行addClass函数的jQuery代码.

I'm wondering, why jQuery code is executed addClass function after page render.

我有一些元素(h1)放在绝对位置.此元素具有规则:

I have some element (h1) positioned absolute.This element has rule:

left: 60%;

和简单的JS:

$(document).ready(function() {
    $('#test').find('header').find('h1').addClass('move');
})

CSS:

.move {
    left: 40%
}

现在，问题:为什么在页面加载时，h1元素首先在左60％的位置，但是在加载后第二个元素，由于move类，它向左移动40％. 这种效果看起来很糟糕，因为h1元素现在已经替换了页面上可见的效果...

Now, question: why on page loads, h1 element is first on 60% left, but second after load, it moves to left by 40% thanks to move class. This effect looks bad, as h1 element has now replace effect visible on page...

我想将此元素保留在左侧40％，以便用户看不到移动效果".

I want to have this element at left 40% so user can't see "move effect".

关于， 马雷克.

推荐答案

$(document).ready()的全部内容；是它在呈现页面后之后执行.如果您不希望用户看到更改，则需要在CSS中设置样式，或者仅在JS中设置Class后才显示元素.

The whole point of $(document).ready(); is that it executes after the page is rendered. If you don't want the user to see a change, you need to either set the style in CSS or only show the element after you've set the Class in JS.

这篇关于页面加载后的jQuery addClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！