Implementing a smooth transition effect, such as opacity or fade-in, on an image retrieved from an

I am struggling to achieve opacity with a transition on an image after clicking and changing the photo. I have created a basic slider that displays pictures from an array. How can I smoothly transition the opacity of the image from 0 to 1 over a duration of 1 second? I have tried adding styles both in JavaScript and CSS, but so far, it has not been successful. I have spent several hours working on this issue.

<button id="prev" class="btn-navi"></button>
<div id="my-image-slider"></div>
<button id="next" class="btn-navi"></button>        

#cert #my-image-slider{
 height: 200px;
 width: 150px;
 background-color: aqua;
 /*opacity: 0;*/
 /*transition: all 3s ease;*/
}
#cert #my-image-slider img{
 height: 100%;
 width: 100%;
 opacity: 0.1;
 transition: all 2s ease;
}

var images = [];
    images.push("<img src ='img/dyplom1.jpg'>");
    images.push("<img src ='img/dyplom2.jpg'>");
    images.push("<img src ='img/dyplom3.jpg'>");

    var curIndex = 0 ;
    var mainDiv = document.getElementById("my-image-slider");
    var nextBtn = document.getElementById("next");
    var prevBtn = document.getElementById("prev");

    mainDiv.innerHTML = images[0];

    function getElement() {
        mainDiv.innerHTML = images[curIndex];
        /*images.style.opacity = 1;*/
    };

    function goNext() {
        var nextIndex = curIndex + 1;
        if (nextIndex === images.length) {
            return 0;
        } else {
            return nextIndex;
        }
    };

    nextBtn.addEventListener("click", function () {
        curIndex = goNext();
        getElement();
    });

    function goPrev() {
        var prevIndex = curIndex - 1;
        if (prevIndex === -1) {
            return images.length-1;
        } else {
            return prevIndex;
        }
    };

    prevBtn.addEventListener("click", function () {
        curIndex = goPrev();
        images.style.opacity = 1;
        getElement();
    });

Answer №1

I haven't personally experimented with this, but I believe you could implement @keyframes in your CSS for animations. You can define the keyframe animation, assign it to a certain class, and then use JavaScript to add or remove that class as needed. For more information on keyframes syntax, check out this link: https://css-tricks.com/snippets/css/keyframe-animation-syntax/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a different technique I can use to display an axios response within a v-if statement? Any other methods I should

As a newcomer to Vue.js, I'm struggling with certain concepts even after extensively reading the documentation! My goal is to show a glyphicon when my API call returns true. However, since the call is within a for loop iterating over multiple items, ...

Attempting to align the fixed banner in the middle of my blog

I have spent hours combing through code after code on this site, trying to center my fixed banner without success. I am feeling frustrated and in need of some assistance. Here is the CSS snippet I have been working with: .heading { position:fixed; ...

There was an issue encountered while parsing the JSON data - "SyntaxError: Unexpected token . was caught."

Encountering an error in Chrome while parsing JSON data. The JSON sample can be found at this link. It is valid JSON and the server is sending the correct Content-Type value (application/json). Uncaught SyntaxError: Unexpected token . Firefox shows a sli ...

When working on one of my subdomains, I require the ability to distribute cookies between the two

Currently, I am involved in a project that utilizes a sub-domain under a parent domain called "my-project.parent.com", which unfortunately I do not have access to. Additionally, there is another project operating under the main domain "parent.com" with t ...

Restructure the array to align with the corresponding elements in another

I am looking to filter an array based on ids from another array. Specifically, I have an array of tweet ids associated with a certain hashtag in the object I'm working with. h.tweet_ids = [*someTweetID*, *someOtherTweetID*, …] On the other hand, I ...

How to position radio buttons in line with labels containing inline inputs using Vue and Bootstrap

Currently, I am facing an issue with my form containing a radio button group where one of the radio button labels includes another numerical input. The layout is not aligned correctly, and I am struggling to adjust the spacing using CSS. I am unable to gr ...

I encountered an error of "Unexpected token '>'" while working with an

My code includes an ajax call and utilizes promises in the function: element.on("keypress", ".keyEvents", function(event) { if (event.which == 13) { // create the url and json object var putUrl = ...

Creating consistent image sizes in Bootstrap

I'm currently using Bootstrap 4 to showcase multiple images on my website. I have attempted to apply the Grid system as per Bootstrap's guidelines, but the display of the images is not aesthetically pleasing due to their uneven sizes, which can b ...

Node.js module retriever showing as blank

My current challenge involves the creation of a settings class with one getter. Here is how it currently looks: class Configuration { get endpoint() { return 'https://api.example.com'; } } module.exports.Configuration = Configuration; In a ...

Verify the grid of buttons in my code for the background color

My goal is to make sure that when all the buttons are black, the h2 text in the 'lightsoff' div is displayed. If any buttons are not black, the text will remain hidden. I plan to achieve this by creating a new function that checks the background ...

Submitting data to a PHP script using AJAX and the $_POST method

I'm attempting to transfer data from my AJAX request into a PHP $_POST variable in order to update my database. HTML <form id="23" method="post"> <select name="admin" onchange="chosenadmin(23)"> <option value="rick">rick&l ...

Aligning div elements in the center alongside one another

I have a code where the image height is larger than the containing div, which is intentional. However, I am facing an issue where the text div at the bottom of the image is not positioned correctly. Is there a solution to this problem? I also attempted usi ...

Exploring the possibilities of utilizing JavaScript within TypeScript

My dynamic javascript object holds all the resources (translation strings) for my app. Here's how it is structured: var ResourceManager = (function () { function ResourceManager() { var currentLanguage = $('#activeLanguage').htm ...

Adaptable layout - featuring 2 cards side by side for smaller screens

I am currently designing a webpage that showcases a row of cards, each featuring an image and a title. At the moment, I am utilizing the Bootstrap grid system to display 4 cards per row on larger screens (col-md-2), but my goal is to modify this layout t ...

How to delete a single item from an array using MongoDB

For my discord bot, I've implemented a purchasing system that adds items to the inventory array in mongoDB like this: data.Inventory[itemTobuy] ++; The stored format looks like this: pizza: 1 I also have a system in place where users can use items f ...

Unable to refresh the fullcalendar section following an ajax post click

Currently developing a calendar using fullcalendar. I have created an ajax button that retrieves events from another php page. The first click on the ajax button works fine, displaying a nice month calendar with events. However, my issue arises when I cl ...

Encountering issues with Html.ActionLink in Asp.net MVC when using Bootstrap Select

I am trying to implement a dropdown list for language localization on my website. However, when using <ul> tags with Html.ActionLink, the links are created with language codes as shown below: @{ var routeValues = this.ViewContext.RouteData.Valu ...

Steps for installing v8 Firebase and removing v9 using npm

Seeking guidance on how to install v8 firebase and remove v9 using npm. I am integrating Firebase with ReactJS and in need of some assistance. npm install firebase import { initializeApp } from "firebase/compat/app"; import { getAuth } from &qu ...

Elements overlapped with varying opacities and responsive to mouse hovering

In this Q/A session, we will explore a JS solution for managing the opacity of overlapping elements consistently during hover. Objective Our goal is to create two transparent and overlapping elements, similar to the red boxes showcased below. These eleme ...

Display the HTML code in its formatted text output

I am currently facing an issue while trying to take input from the user using the WYSIWYG text editor plugin. When I attempt to display the text in a label or paragraph, all the HTML tags become visible. For instance, @string str = "<b>sample text&l ...