1

I'm in the process of learning JQuery using CodeAcademy. Well when jquery creates an effect on a HTML element, say specifically fadeOut, does it remove the HTML element from the page? Or does it push it into some data structure of sort?

The reason for the question is that, I noticed ( in the below code of mine), that once a button is faded out, the adjacent button takes it place. Since I FADE IN later, the element has to be present somewhere. So how does JQUERY work exactly?

I'm new to even HTML so please be kind.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Vanishing Act</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div id="blue"></div>
        <div></div>
        <div></div>
        <div></div>
        <br/><button>Click Me!</button>
    </body>
</html>

CSS

div {
    height: 100px;
    width: 100px;
    display: inline-block;
    background-color: #F38630;
    border-radius: 5px; }

#blue {
    background-color: #A7DBD8; }

Script

$(document).ready(function() {
    $('button').click(function() {
        $('#blue').fadeOut('slow');
            $('button').click(function(){
               $('#blue').fadeIn('slow');
            });
    });
});
Arjun
  • 1,259
  • 1
  • 13
  • 25
  • 1
    It's not removed from the DOM, but fadeOut will set the display property to `none` once it has faded out, so the element is removed from the document flow, and that is why your elements move. – adeneo Jan 23 '13 at 11:01
  • It is not removed from the DOM. The opacity value of the element is altered/reduced periodically till 0 and a `display: none` is applied on the element. To avoid elements shifting up/down use a custom animation on the element altering on the opacity value. – kayen Jan 23 '13 at 11:07
  • So why would the adjacent elements take its place if the visibility is set to none? .. So when visibility is none, it is not rendered? – Arjun Jan 23 '13 at 11:11
  • fadeIn, fadeOut does not alter the CSS `visibility` property. It alters the CSS `display` property after altering the CSS `opacity` property. – kayen Jan 23 '13 at 11:13
  • 1
    And to explain the difference between CSS `visibility` and CSS `display` properties, go here: http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone. – kayen Jan 23 '13 at 11:17
  • Awesome .. That was what I wanted to know.. Thanks @kayen U should add that comment as the answer. I can upvote and close the question. – Arjun Jan 23 '13 at 11:19

8 Answers8

1

It is not removed from the DOM. The opacity value of the element is altered/reduced periodically till 0 and the CSS display property is changed to nonefor the element. To avoid elements shifting up/down use a custom animation on the element altering only the opacity value.

Also, fadeIn, fadeOut does not alter the CSS visibility property. It alters the CSS display property after altering the CSS opacity property.

To explain the difference between CSS visibility and CSS display properties, there's a funny example on this link: http://www.kavoir.com/2009/02/css-difference-between-opacity0-visibilityhidden-and-displaynone.html

kayen
  • 4,838
  • 3
  • 19
  • 20
0

When you check the element through firebug you may notice that the style display:none is added to the div when you fadeout and apply the display:inlinestyle when you fadein

you may use this code like 

$(document).ready(function() {
    $('button').click(function() {
        $('#blue').fadeToggle('slow');

    });
});
muthu
  • 5,381
  • 2
  • 33
  • 41
0

jQuery uses display: none which makes the element invisible and takes it out of the UI.

fadeOut is a shortcut for this animation (from the jQuery source):

fadeOut: { opacity: "hide" },
Matt Zeunert
  • 16,075
  • 6
  • 52
  • 78
0

Unless you use remove() jQuery does not remove elements from the DOM ("the HTML page")! jQuery makes heavy use of CSS ("styling") which means that the attributes of elements are changed.

fadeOut() "only" sets the visibility at the end of the effect to "not visible", but the element is technically still there, but not visible anymore.

Technically jQuery uses the display attribute and sets it to none. But I explained it with "visibility" for better understanding.

powtac
  • 40,542
  • 28
  • 115
  • 170
0

If you open the developer tools in chrome or something you will see that the element that you have fadedOut basically has it's opacity decremented to 0 over a period of time and then sets the display value to 'none' e.g.

before:

<p>
  If you click on this paragraph
  you'll see it just fade away.
  </p>

during:

<p style="opacity: 0.4566767676767;">
  If you click on this paragraph
  you'll see it just fade away.
  </p>

after:

<p style="display: none;">
  If you click on this paragraph
  you'll see it just fade away.
  </p>
MiiisterJim
  • 419
  • 1
  • 4
  • 16
0

On fadeout jquery just changes the display style from what it was before (propably inline-block) to none.

style="dislplay:inline-block"

to

style="display:none"

The element is then just hidden.

On fadein the same thing happens but jquery stores the display value before fading out in a variable. With that variable it can retrieve the display style when fading in.

daniatic
  • 502
  • 4
  • 18
0

FadeOut and FadeIn change the CSS 'display' attribute of an element, but the element is still present in the page.

If you're using Chrome, right click on the first square in your page, and click 'inspect element'. You will see the markup code at the bottom of your page, and watch as you click the button to see the style changing in real time.

Maff
  • 1
0

Create a variable called $target in script.js and use the = sign to assign it to the jQuery selector that represents #4 in the ordered list. When you run your code, it should fade away!

Jason
  • 2,503
  • 3
  • 38
  • 46
ninie
  • 1