0

I basically had the same problem as the person in this Stackoverflow post.

The suggested solution was:

$('.littleme').css('visibility','visible').hide().fadeIn('slow');

This piece of code feels really weird to me. I thought the browser builds the DOM using HTML/CSS and i can then freely manipulate it using JS/jQuery - why do i still have to change the CSS?

I am a CSS and Javascript beginner, so could someone please explain to me, why i have to manipulate the CSS before being able to use jQuery to fade in my element?

Community
  • 1
  • 1
Luca Fülbier
  • 2,641
  • 1
  • 26
  • 43
  • 1
    Are you asking why something has to be hidden before it can be faded in, and why jQuery doesn't consider visiblity hidden as being "hidden" ? – adeneo Oct 16 '16 at 15:16
  • I had the same problem when i used `opacity: 0;` to initially hide my elements. I also had to set the opacity back to 1 manipulating the css before being able to fade it. I am not quite understanding how all of these play together. – Luca Fülbier Oct 16 '16 at 15:23

3 Answers3

2

JQuery's css(), hide() and fadeIn() methods all change the DOM rather than the CSS you've loaded in.

In this case you change the visibility style first using css(), then hide() changes the display style to none and then fadeIn() changes the display style to block but does so by tweening the transparency.

worldofjr
  • 3,868
  • 8
  • 37
  • 49
  • This is what i needed to finally understand, what is going on, thank you! I guess my question is phrased rather badly, but it's hard to name the things you don't understand in the beginning of learning something new. – Luca Fülbier Oct 16 '16 at 15:26
1

The .css() jQuery method updates the DOM element's style object. It doesn't touch the actual CSS stuff that you imported via <style> elements on the page.

Element style overrides styles implied by CSS. Performing those changes via jQuery (or direct use of DOM APIs) is affecting the structures established by style properties mixed into the HTML markup:

<div class=foo style="width: 100%; background-color: red;">

for example. The contents of that "style" attribute are parsed and used to construct the style property of the DOM node. That's what's affected by the jQuery .css() method.

Pointy
  • 405,095
  • 59
  • 585
  • 614
1

.hide() and .fadeIn() plays with the display attribute.
But if the visibility is set to hidden, obviously no result can be seen.

That is why the answer you found talks about setting the visibility to visible first.

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
  • Can you please explain how hide and fadeIn manipulate the `display` attribute? I only know about `display: block` or `display: inline` in CSS. – Luca Fülbier Oct 16 '16 at 15:21
  • 1
    @LucaFülbier `.hide()` sets `display` to `none`. `.fadeIn()` sets `display` to `block` and then gradually increases `opacity`. On the other hand, there is `visibility: hidden`, which is not taken into account in these functions. – blex Oct 16 '16 at 15:24
  • 2
    It would be good for you to read jQuery docs instead: [`.hide()`](http://api.jquery.com/hide/) and [`.fadeIn()`](http://api.jquery.com/fadein/) – Louys Patrice Bessette Oct 16 '16 at 15:24
  • You are totally right, i never would've thought, that it would change the display attribute while fading it in using opacity. – Luca Fülbier Oct 16 '16 at 15:28