fadeIn and fadeOut "style" of an element in html, using jQuery or javaScript

Question

I want to do something like the below code (by jQuery):

        $( "#ID_ELEMENT" ).style.backgroundColor="blue".fadeIn(100);
    setTimeout(function(){ $( "#ID_ELEMENT" ).style.backgroundColor="blue".fadeOut(100); }, 3000);

Thanks.

Answer 1

The challenge

The code in your post appears to be an attempt to use method chaining (see here and here) to:

1. Select the element with the ID attribute of ID_ELEMENT
2. Change that element's background color property to blue
3. Use the jQuery fadeIn effect on that updated element

And then:

1. Wait 3 seconds (3000ms)
2. Select the element with the ID attribute of ID_ELEMENT
3. Change that element's background-color property to blue
4. Use the jQuery fadeOut effect on that updated element

The problems

When using method chaining, each method returns an object that can be used by the next method in the chain. You have intermixed vanilla JavaScript and jQuery throughout your code:

• Not all functions in vanilla JavaScript return a value. It is not possible to use method chaining if a method does not return a value that can be used by the next method.
• The jQuery documentation provides details about the functions, as well as information about the returned object (mostly jQuery collections). Because you have intermixed vanilla JavaScript and jQuery, your code will not work (see below).

Breaking down a solution

(1) The $( "#ID_ELEMENT" ) selector in your code, creates a jQuery collection object for the element(s) with the ID of ID_ELEMENT. The creation of the jQuery collection object enables you to apply jQuery methods to the selected elements.

(2) In plain JavaScript, you can select a HTML element in the page (e.g. document.getElementById( "ID_ELEMENT" )). This selection then provides access to methods and properties for that element. For example, .style.backgroundColor="blue" is such a method, allowing an element's background colour to be updated to blue.

The methods available for a JavaScript DOM element are different to the methods available for a jQuery collection element, and the two elements are not interchangeable. More information about the available JavaScript methods can be found on MDN. More information about jQuery methods can be found on the jQuery website.

JQuery includes the .css() method, which allows you to perform the same operation as .style.backgroundColor. Using the jQuery equivalent means that a jQuery collection object has been returned, ready to be used by the next method in the chain.

(3) Because the previous method returned a jQuery collection object, you can now use a further jQuery method on the returned object.

You can repeat the steps above to create a second method chain. Note, the background-color property was already set to blue in the first stage of the code. Unless you will be changing this property somewhere else, this operation may be redundant.

Gives the result

$( "#ID_ELEMENT" ) // grab el in jQuery
     .css( "backgroundColor", "blue" ) // change  CSS background colour prop to blue
     .fadeIn(1000);  // fade element in
 
 // do something in 3s time...
 setTimeout(function(){ 
     $( "#ID_ELEMENT" )
         .css( "backgroundColor", "blue" ) // change CSS background to blue
         .fadeOut(1000);  // fade element out
 }, 3000);
 

/* Optional - added sizing make demo more obvious */
div{
    width: 500px;
    height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ID_ELEMENT"></div>