Leveraging the local variables within a function in conjunction with the setTimeout method

Question

Leveraging the local variables within a function in conjunction with the setTimeout method

Currently, I'm facing an issue with a website that I'm working on. I have created a function that should add a specific class to different ids in order to make images fade out one by one on the home page. To streamline the process, I used a local variable 'a' to easily code for the different ids without having to create separate functions. However, I'm running into difficulties when using setTimeout. It seems that I can't get setTimeout to work properly. Any assistance with this matter would be greatly appreciated. The classes are being added to the ids successfully; my struggle lies with the setTimeout function. I've tried various methods that I found online, but I'm having trouble grasping them. Below is the code snippet:

window.onload;

var fetchOne =document.getElementById('picOne');
console.log(fetchOne);

var fetchTwo =document.getElementById('picTwo');
var fetchThree =document.getElementById('picThree');

function AttachClass (a){
    
    a.className ='opacity';
    
}

setTimeout(AttachClass.bind(null,a),8000);

AttachClass (fetchOne);

AttachClass (fetchTwo);

AttachClass (fetchThree);

#picOne{
    
    opacity: 1;
    
    transition: opacity 2s ease-in-out
    
}

#picOne.opacity{
    opacity: 0;
}

#picTwo{
    opacity: 1;
    z-index: -1;
    transition: opacity 2s ease-in-out
    
}

#picTwo.opacity{
    opacity: 0;
}

#picThree{
   opacity: 1;
    z-index: -2;
    
    transition: opacity 2s ease-in-out
}

#picThree.opacity{
    opacity: 0;
}

<div class="landscape_pics">
        
        <img id="picOne" src="media/Photographs/BK3U8791.JPG">
        <img id="picTwo" src="media/Photographs/2014Feb%20-%20Vacation%20-%20Sao%20Paulo%20-%200071a.jpg">
        <img id="picThree" src="media/Photographs/2014Aug06%20-%20Stadium%20-%20001.JPG">
        
    </div>

javascript css image settimeout opacity

Answer 1

Answer №1

By setting up one handler for each image with a specific timeout, you can ensure that they fade out independently. However, the code provided lacks the definition of variable a, which renders the setTimeout function ineffective.

To address this issue, you should create separate setTimeout functions for each image that needs to fade out:

for (var i = 0; i < images.length; i++) {
    setTimeout(AttachClass.bind(null, images[i]), 2000);
}

Additionally, the presence of window.onload in the code appears unnecessary and can be removed safely. Once the timeouts are set up, there is no need to call the AttachClass function again.

All you need to do is gather the queried DOM images into an array named

images</code, like so:</p>

<pre><code>var fetchOne = document.getElementById('picOne');
var fetchTwo = document.getElementById('picTwo');
var fetchThree = document.getElementById('picThree');

function AttachClass(a) {
    a.classList.add('opacity'); // IE10+ support only
};

let images = [fetchOne, fetchTwo, fetchThree];

for (var i = 0; i < images.length; i++) {
  setTimeout(AttachClass.bind(null, images[i]), 5000);
}

To further enhance the code, consider applying a common class (e.g., pic) to all images, querying the DOM based on this class, and then setting up the required timeouts:

var images = document.getElementsByClassName('pic');

function AttachClass(a) {
  a.classList.add('opacity'); 
}

for (var i = 0; i < images.length; i++) {
  setTimeout(AttachClass.bind(null, images[i]), 1000);
}

Feel free to experiment with the code using this JSBIN link. Happy coding!

Answer 2

By setting up one handler for each image with a specific timeout, you can ensure that they fade out independently. However, the code provided lacks the definition of variable a, which renders the setTimeout function ineffective.

To address this issue, you should create separate setTimeout functions for each image that needs to fade out:

for (var i = 0; i < images.length; i++) {
    setTimeout(AttachClass.bind(null, images[i]), 2000);
}

Additionally, the presence of window.onload in the code appears unnecessary and can be removed safely. Once the timeouts are set up, there is no need to call the AttachClass function again.

All you need to do is gather the queried DOM images into an array named

images</code, like so:</p>

<pre><code>var fetchOne = document.getElementById('picOne');
var fetchTwo = document.getElementById('picTwo');
var fetchThree = document.getElementById('picThree');

function AttachClass(a) {
    a.classList.add('opacity'); // IE10+ support only
};

let images = [fetchOne, fetchTwo, fetchThree];

for (var i = 0; i < images.length; i++) {
  setTimeout(AttachClass.bind(null, images[i]), 5000);
}

To further enhance the code, consider applying a common class (e.g., pic) to all images, querying the DOM based on this class, and then setting up the required timeouts:

var images = document.getElementsByClassName('pic');

function AttachClass(a) {
  a.classList.add('opacity'); 
}

for (var i = 0; i < images.length; i++) {
  setTimeout(AttachClass.bind(null, images[i]), 1000);
}

Feel free to experiment with the code using this JSBIN link. Happy coding!

Answer 3

Answer №2

Perhaps you are in need of a solution similar to this:

window.onload = function() {

  ApplyEffect();

  function ApplyEffect() {
    setTimeout(function() {
      var image = document.querySelector('.pics img:not(.opacity)');
      if (image) {
        image.className = 'opacity';
        ApplyEffect();
      }
    }, 1200);
  }
}

.pics img {
  width: 100px;
  opacity: 1;
  transition: opacity 1s ease-in-out
}

img.opacity {
  opacity: 0;
}

<div class="pics">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg">
</div>

Answer 4

Perhaps you are in need of a solution similar to this:

window.onload = function() {

  ApplyEffect();

  function ApplyEffect() {
    setTimeout(function() {
      var image = document.querySelector('.pics img:not(.opacity)');
      if (image) {
        image.className = 'opacity';
        ApplyEffect();
      }
    }, 1200);
  }
}

.pics img {
  width: 100px;
  opacity: 1;
  transition: opacity 1s ease-in-out
}

img.opacity {
  opacity: 0;
}

<div class="pics">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg">
</div>

Answer 5

Answer №3

Thank you to everyone who assisted me in finding the solution to my problem. Here is how I successfully resolved the issue:

window.onload
var fetchOne =document.getElementById('picOne');
console.log(fetchOne);
var fetchTwo =document.getElementById('picTwo');
var fetchThree =document.getElementById('picThree');



setInterval(function() {
    
    setTimeout(function AttachClass1 (){ fetchOne.className ='opacity';},1000);
    
    setTimeout(function AttachClass2 (){ fetchTwo.className ='opacity';},8000);
        
    setTimeout(function AttachClass3 (){ fetchThree.className ='opacity';},14000);
    
    setTimeout(function RemoveClass2 () { fetchTwo.classList.remove("opacity");},14000)
    
    setTimeout(function RemoveClass1 () { fetchOne.classList.remove("opacity");},18000)
    
    setTimeout(function RemoveClass3 () { fetchThree.classList.remove("opacity");},18000)
    
},24000);

The images now transition one by one as desired, and revert back using the classlist.remove property. I have full control over the intervals which is great. While I am not versed in JQuery yet, I prefer sticking to javascript for now as it's what I am most comfortable with. Once again, thank you all for your assistance!

Answer 6

Thank you to everyone who assisted me in finding the solution to my problem. Here is how I successfully resolved the issue:

window.onload
var fetchOne =document.getElementById('picOne');
console.log(fetchOne);
var fetchTwo =document.getElementById('picTwo');
var fetchThree =document.getElementById('picThree');



setInterval(function() {
    
    setTimeout(function AttachClass1 (){ fetchOne.className ='opacity';},1000);
    
    setTimeout(function AttachClass2 (){ fetchTwo.className ='opacity';},8000);
        
    setTimeout(function AttachClass3 (){ fetchThree.className ='opacity';},14000);
    
    setTimeout(function RemoveClass2 () { fetchTwo.classList.remove("opacity");},14000)
    
    setTimeout(function RemoveClass1 () { fetchOne.classList.remove("opacity");},18000)
    
    setTimeout(function RemoveClass3 () { fetchThree.classList.remove("opacity");},18000)
    
},24000);

The images now transition one by one as desired, and revert back using the classlist.remove property. I have full control over the intervals which is great. While I am not versed in JQuery yet, I prefer sticking to javascript for now as it's what I am most comfortable with. Once again, thank you all for your assistance!

Answer 7

Answer №4

Here is the code snippet for fading images using JavaScript and CSS:

 var imgs = document.querySelectorAll('.fade');
    var delay = 500;
    for (var i = 0; i < imgs.length; i++) {
        (function(i){
        setTimeout(function () {
            imgs[i].classList.add('opacity');
        }, delay * (i + 1))
        })(i)
    }

.fade {
opacity:.2;
transition: 1s all ease-in-out;
}

.fade.opacity {
opacity:1
}

<div>
    <img src="http://lorempixel.com/200/150/people/" alt="" class="fade" id="i1">
</div>
<div>
    <img src="http://lorempixel.com/200/150/food/" alt="" class="fade" id="i2">
</div>
<div>
    <img src="http://lorempixel.com/200/150/sports/" alt="" class="fade" id="i3">
</div>

Answer 8

Here is the code snippet for fading images using JavaScript and CSS:

 var imgs = document.querySelectorAll('.fade');
    var delay = 500;
    for (var i = 0; i < imgs.length; i++) {
        (function(i){
        setTimeout(function () {
            imgs[i].classList.add('opacity');
        }, delay * (i + 1))
        })(i)
    }

.fade {
opacity:.2;
transition: 1s all ease-in-out;
}

.fade.opacity {
opacity:1
}

<div>
    <img src="http://lorempixel.com/200/150/people/" alt="" class="fade" id="i1">
</div>
<div>
    <img src="http://lorempixel.com/200/150/food/" alt="" class="fade" id="i2">
</div>
<div>
    <img src="http://lorempixel.com/200/150/sports/" alt="" class="fade" id="i3">
</div>

Leveraging the local variables within a function in conjunction with the setTimeout method

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Experiencing disconnection from SQL server while utilizing the Express.js API

Setting up event listeners from a string array (using PIXI.js)

React.js - "Encountered error: Unable to access 'map' property of undefined variable"

The custom created THREE.Curve is not rendering correctly

Tips for specifying the "url" parameter in xmlhttp.open() for utilizing Ajax in communication with node.js

Can one validate a single route parameter on its own?

What is the best method to ensure that an image remains at the bottom of a div even as the div's height adjusts?

Complete Guide to Node.JS CRUD Delete Functionality

What is the best method for choosing a div element using JavaScript and altering its background color?

Enhance the functionality of your website by implementing a zoom feature

Is there a way to display my current connected clients to a new client using socket.io?

Creating an expo apk using eas buildWould you like a tool for generating

React Bootstrap always displays tooltips

Getting the content of a textarea within a v-for loop collection

A guide on showcasing a MultiPolygon GeoJSON on a Leaflet map

Using jQuery to manage multiple page requests on a single page

Why is AJAX failing to execute PHP file from JavaScript?

Using NodeJS to perform asynchronous tasks with setImmediate while also incorporating private class

Move the DIV element to a static section within the DOM

"Enhance input functionality by updating the value of the text input or resizing the textbox