Tips for creating seamless image transitions using a toggle button

Question

Tips for creating seamless image transitions using a toggle button

My transition effect is working smoothly, but I am having trouble setting it up for the image. How can I resolve this issue?

I attempted the following:

var lightsOff = document.querySelector("#lights-off");
var lightsOn = document.querySelector("#lights-on");
lightsOff.style.display = "block";
lightsOn.style.display = "none";

And also this:

var lightsOff = document.querySelector("#lights-off");
var lightsOn = document.querySelector("#lights-on");
lightsOff.style.display = "none";
lightsOn.style.display = "block";

Below is the complete code:

function myFunction() {
  var elements = document.querySelectorAll(".one, .three, .five");
  elements.forEach(function(element) {
    element.classList.toggle("dark-mode");
    if (element.classList.contains("dark-mode")) {
      if (element.classList.contains("one")) {
        var logoElement = element.querySelector('.logo');
        var h2Element = element.querySelector('h2');
        var sloganElement = element.querySelector('.slogan');
        logoElement.style.setProperty('color', 'white');
        sloganElement.style.setProperty('color', 'white');
        h2Element.style.setProperty('color', 'white');
      } else if (element.classList.contains("three")) {
        var textThreeOne = element.querySelector('.text-threeone');
        var textThreeTwo = element.querySelector('.text-threetwo');
        var p = element.querySelector('.text-threetwo + p');
        textThreeOne.style.setProperty('color', 'white');
        textThreeTwo.style.setProperty('color', 'white');
        p.style.setProperty('color', 'white');

        var lightsOff = document.querySelector("#lights-off");
        var lightsOn = document.querySelector("#lights-on");
        lightsOff.style.display = "block";
        lightsOn.style.display = "none";

        var blackmoon = document.querySelector(".moon");
        blackmoon.style.display = "block";
      } else if (element.classList.contains("five")) {
        var inputs = element.querySelectorAll('input');
        var textarea = element.querySelector('textarea');
        var submitBtn = element.querySelector('input[type="submit"]');
        inputs.forEach(input => {
          input.style.setProperty('background-color', '#1f1f1f');
          input.style.setProperty('color', '#ffffff');
        });
        textarea.style.setProperty('background-color', '#1f1f1f');
        textarea.style.setProperty('color', '#ffffff');
        submitBtn.style.setProperty('background-color', '#1f1f1f');
        // Add mouseover color
        submitBtn.style.setProperty('transition', 'background-color 0.2s');
        submitBtn.addEventListener("mouseover", function() {
          submitBtn.style.setProperty('background-color', '#101010');
        });
        submitBtn.addEventListener("mouseout", function() {
          submitBtn.style.setProperty('background-color', '#1f1f1f');
        });
        var contact = element.querySelector('#contact');
        var pOne = element.querySelector('.five>p+p');
        var pTwo = element.querySelector('.five>p+p+p');
        contact.style.setProperty('color', 'white');
        pOne.style.setProperty('color', 'white');
        pTwo.style.setProperty('color', 'white');
      } else {
        element.style.setProperty('color', 'white');
      }
    } else {
      if (element.classList.contains("one")) {
        var logoElement = element.querySelector('.logo');
        logoElement.style.setProperty('color', '#353535');
        var sloganElement = element.querySelector('.slogan');
        sloganElement.style.setProperty('color', '#353535');
        var sloganElement = element.querySelector('h2');
        sloganElement.style.setProperty('color', '#353535');

        var blackmoon = document.querySelector(".moon");
        blackmoon.style.display = "none";
      } else if (element.classList.contains("three")) {
        var textThreeOne = element.querySelector('.text-threeone');
        var textThreeTwo = element.querySelector('.text-threetwo');
        var p = element.querySelector('.text-threetwo + p');
        var lightsOff = document.querySelector("#lights-off");
        var lightsOn = document.querySelector("#lights-on");
        lightsOff.style.display = "none";
        lightsOn.style.display = "block";

        p.style.setProperty('color', '#353535');
        textThreeOne.style.setProperty('color', '#353535');
        textThreeTwo.style.setProperty('color', '#353535');
      } else if (element.classList.contains("five")) {
        var inputs = element.querySelectorAll('input');
        var textarea = element.querySelector('textarea');
        var submitBtn = element.querySelector('input[type="submit"]');
        inputs.forEach(input => {
          input.style.setProperty('background-color', '#efefef');
          input.style.setProperty('color', 'black');

        });
        textarea.style.setProperty('background-color', '#efefef');
        textarea.style.setProperty('color', 'black');

        submitBtn.style.setProperty('background-color', '#437bff');
        submitBtn.style.setProperty('color', 'white');

        // Add mouseover color
        submitBtn.style.setProperty('transition', 'background-color 0.2s');
        submitBtn.addEventListener("mouseover", function() {
          submitBtn.style.setProperty('background-color', '#133edb');
        });
        submitBtn.addEventListener("mouseout", function() {
          submitBtn.style.setProperty('background-color', '#437bff');
        });

        var contact = element.querySelector('#contact');
        var pOne = element.querySelector('.five>p+p');
        var pTwo = element.querySelector('.five>p+p+p');
        contact.style.setProperty('color', '#353535');
        pOne.style.setProperty('color', '#353535');
        pTwo.style.setProperty('color', '#353535');
      }
    }
  });
}

.one,
.three,
.five {
  transition: 1500ms;
}

<div>
  <button class="darkmodebtn" onclick="myFunction()"></button>
  <img id="lights-off" src="../images/darkmode.png" style="display: none;">
  <img id="lights-on" src="../images/ABC.png">
</div>

javascript html css css-transitions

Answer 1

Answer №1

document.querySelector('.light-on1').addEventListener('click', function() {
  const el = document.querySelector('.container1 img');
  toggle_light_on_display(el);
})
document.querySelector('.light-off1').addEventListener('click', function() {
  const el = document.querySelector('.container1 img');
  toggle_light_off_display(el);
})

function toggle_light_on_display(el) {
  el.style.opacity = '0';
  el.style.display = 'block';
  const to = setTimeout(function() {
    el.style.opacity = '1';
    clearTimeout(to); // It's better to clear the timeout when no longer needed
  }, 200) // This slight delay is for the display block to finish
}

function toggle_light_off_display(el) {
  el.style.opacity = '0';
  const to = setTimeout(function() {
    el.style.display = 'none';
    clearTimeout(to); // It's better to clear the timeout when no longer needed
  }, 500) // This delay represents the transition delay
}

document.querySelector('.light-on2').addEventListener('click', function() {
  const el = document.querySelector('.container2 img');
  toggle_light_on_visibility(el);
})
document.querySelector('.light-off2').addEventListener('click', function() {
  const el = document.querySelector('.container2 img');
  toggle_light_off_visibility(el);
})

function toggle_light_on_visibility(el) {
  el.style.opacity = '0';
  el.style.visibility = 'visible';
  const to = setTimeout(function() {
    el.style.opacity = '1';
    clearTimeout(to); // It's better to clear the timeout when no longer needed
  }, 200) // This slight delay is for the visibility visible effect to finish
}

function toggle_light_off_visibility(el) {
  el.style.opacity = '0';
  const to = setTimeout(function() {
    el.style.visibility = 'hidden';
    clearTimeout(to); // It's better to clear the timeout when no longer needed
  }, 500) // This delay represents the transition delay
}

.container1 img {
  display: none;
  transition: 500ms ease-in all;
}

.container2 img {
  visibility: hidden;
  transition: 500ms ease-in all;
}

<button class="light-on1">light-on display</button>
<button class="light-off1">light-off display</button>
<div class="container1">
  <img src="https://picsum.photos/id/20/800/600" alt="">
</div>

<button class="light-on2">light-on visibility</button>
<button class="light-off2">light-off visibility</button>
<div class="container2">
  <img src="https://picsum.photos/id/30/800/600" alt="">
</div>

Here are two versions, one using display and the other using visibility.

To observe the difference in usage, place the container 2 block and buttons 2 before those of container 1 in your HTML code. The visibility method helps preserve space on the page.

In the provided code, I separated the on and off functions, but they can be combined into a single toggle function. Detection can be based on style opacity or visibility.

You can adjust the delays as you see fit. Note that a small delay should be included when transitioning from display to on or from visibility to visible, as browsers need time to render these changes.

You can also experiment with the image transitions and their timing. If you alter the transition duration, remember to adjust the off delay accordingly.

This code can be easily adapted to suit your needs and integrated into your projects.

Answer 2

document.querySelector('.light-on1').addEventListener('click', function() {
  const el = document.querySelector('.container1 img');
  toggle_light_on_display(el);
})
document.querySelector('.light-off1').addEventListener('click', function() {
  const el = document.querySelector('.container1 img');
  toggle_light_off_display(el);
})

function toggle_light_on_display(el) {
  el.style.opacity = '0';
  el.style.display = 'block';
  const to = setTimeout(function() {
    el.style.opacity = '1';
    clearTimeout(to); // It's better to clear the timeout when no longer needed
  }, 200) // This slight delay is for the display block to finish
}

function toggle_light_off_display(el) {
  el.style.opacity = '0';
  const to = setTimeout(function() {
    el.style.display = 'none';
    clearTimeout(to); // It's better to clear the timeout when no longer needed
  }, 500) // This delay represents the transition delay
}

document.querySelector('.light-on2').addEventListener('click', function() {
  const el = document.querySelector('.container2 img');
  toggle_light_on_visibility(el);
})
document.querySelector('.light-off2').addEventListener('click', function() {
  const el = document.querySelector('.container2 img');
  toggle_light_off_visibility(el);
})

function toggle_light_on_visibility(el) {
  el.style.opacity = '0';
  el.style.visibility = 'visible';
  const to = setTimeout(function() {
    el.style.opacity = '1';
    clearTimeout(to); // It's better to clear the timeout when no longer needed
  }, 200) // This slight delay is for the visibility visible effect to finish
}

function toggle_light_off_visibility(el) {
  el.style.opacity = '0';
  const to = setTimeout(function() {
    el.style.visibility = 'hidden';
    clearTimeout(to); // It's better to clear the timeout when no longer needed
  }, 500) // This delay represents the transition delay
}

.container1 img {
  display: none;
  transition: 500ms ease-in all;
}

.container2 img {
  visibility: hidden;
  transition: 500ms ease-in all;
}

<button class="light-on1">light-on display</button>
<button class="light-off1">light-off display</button>
<div class="container1">
  <img src="https://picsum.photos/id/20/800/600" alt="">
</div>

<button class="light-on2">light-on visibility</button>
<button class="light-off2">light-off visibility</button>
<div class="container2">
  <img src="https://picsum.photos/id/30/800/600" alt="">
</div>

Here are two versions, one using display and the other using visibility.

To observe the difference in usage, place the container 2 block and buttons 2 before those of container 1 in your HTML code. The visibility method helps preserve space on the page.

In the provided code, I separated the on and off functions, but they can be combined into a single toggle function. Detection can be based on style opacity or visibility.

You can adjust the delays as you see fit. Note that a small delay should be included when transitioning from display to on or from visibility to visible, as browsers need time to render these changes.

You can also experiment with the image transitions and their timing. If you alter the transition duration, remember to adjust the off delay accordingly.

This code can be easily adapted to suit your needs and integrated into your projects.

Answer 3

Answer №2

Here is a new snippet where I have combined the two functions into one using your HTML structure:

function myFunction() {
  const lightsOff = document.querySelector("#lights-off");
  const lightsOn = document.querySelector("#lights-on");
  if (lightsOff.style.display === 'none') {
    toggle_light_display('off');
  } else {
    toggle_light_display('on');
  }
}

function toggle_light_display(test) {
  let el1, el2;
  if (test === 'off') {
    el1 = document.querySelector("#lights-on");
    el2 = document.querySelector("#lights-off");
  } else {
    el1 = document.querySelector("#lights-off");
    el2 = document.querySelector("#lights-on");
  }
  el1.style.opacity = '0';
  let to = setTimeout(function() {
    el1.style.display = 'none';
    clearTimeout(to);
    el2.style.opacity = '0';
    el2.style.display = 'block';
    to = setTimeout(function() {
      el2.style.opacity = '1';
      clearTimeout(to);
    }, 200)
  }, 500)
}

img {
  transition: 500ms ease-in all;
}

<div>
  <button class="darkmodebtn" onclick="myFunction()">switch</button>
</div>
<div>
  <img id="lights-off" src="https://picsum.photos/id/20/800/600" alt="" style="display: none;">
  <img id="lights-on" src="https://picsum.photos/id/30/800/600" alt="">
</div>

Answer 4

Here is a new snippet where I have combined the two functions into one using your HTML structure:

function myFunction() {
  const lightsOff = document.querySelector("#lights-off");
  const lightsOn = document.querySelector("#lights-on");
  if (lightsOff.style.display === 'none') {
    toggle_light_display('off');
  } else {
    toggle_light_display('on');
  }
}

function toggle_light_display(test) {
  let el1, el2;
  if (test === 'off') {
    el1 = document.querySelector("#lights-on");
    el2 = document.querySelector("#lights-off");
  } else {
    el1 = document.querySelector("#lights-off");
    el2 = document.querySelector("#lights-on");
  }
  el1.style.opacity = '0';
  let to = setTimeout(function() {
    el1.style.display = 'none';
    clearTimeout(to);
    el2.style.opacity = '0';
    el2.style.display = 'block';
    to = setTimeout(function() {
      el2.style.opacity = '1';
      clearTimeout(to);
    }, 200)
  }, 500)
}

img {
  transition: 500ms ease-in all;
}

<div>
  <button class="darkmodebtn" onclick="myFunction()">switch</button>
</div>
<div>
  <img id="lights-off" src="https://picsum.photos/id/20/800/600" alt="" style="display: none;">
  <img id="lights-on" src="https://picsum.photos/id/30/800/600" alt="">
</div>

Tips for creating seamless image transitions using a toggle button

Answer №1

Answer №2

Similar questions

Step by step guide on integrating ReactJS into your current node.js backend application

Creating dynamic styles with Material-UI's useStyles

The dropdown menu disappears when I hover over the tab, making it impossible for me to navigate it in the react app

Optimal approach for integrating enum with Angular, Mongoose, and Node.js

The npm module parsing has encountered an error... It appears that a suitable loader is required to process this file format

Show a notification when utilizing AJAX requests

Select multiple items from a list in HTML using the power of jQuery with a Multi Select

Tips for keeping the scroll position of a bootstrap table when reloading the page

Finding a solution to this issue in Angular will consistently result in a false outcome

Reload the text content of a locally hosted webpage within an iframe at regular intervals

stop the menu component from triggering a re-render

The issue of a false value not being correctly matched in Jasmine is causing problems

A guide on retrieving the selected option from a dropdown menu with React Material UI

What is the method for accessing an image in JavaScript?

Stop the Bootstrap row from automatically adjusting to the height of the tallest child column element, and instead utilize the extra space below the smaller element

Utilizing Vue.js for Tabs in Laravel 5.8

Javascript's associative arrays: a versatile tool for data organization

The Nuxt auth module fails to update the user's loggedin status within the store state

Is there a way to restrict the amount of user input that is allowed?

What is the best way to switch between List and Grid view while automatically updating the image displayed?