Use jQuery to transition the "position:absolute" element from top to bottom and create a smooth fade effect

When the "anim" class is activated, it should smoothly fade in from top to bottom

Here is the corresponding HTML code:

<div class="col-xs-6" style="position:relative;">
    <img src="<?= site_url('assets/image/right_bg.png'); ?>" style="width:100%; position:absolute; top:0; left:0;">
    <img class="anim" src="<?= site_url('assets/image/right_cover_1-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_2-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_3-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_4-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_5-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_6-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_7-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_8-11.png'); ?>">
    <img class="anim" src="<?= site_url('assets/image/right_cover_9-11.png'); ?>">
    <img src="<?= site_url('assets/image/right_bg_mid.png'); ?>" style="width:100%; position:absolute; top:0; left:0;">
</div>

The CSS styling for the animation is as follows:

.anim {
    display:none;
    width:100%; 
    position:absolute; 
    top:-100px; 
    left:0;
}

To achieve the desired effect of the animation, you can use the jQuery functions show() and top:0px. Thank you for your assistance.

javascriptjqueryhtmlcss

Answer №1

Approach using CSS:

Start by creating a customized animation

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Next, apply this animation to the desired divs

.anim {
    display:none;
    width:100%; 
    position:absolute; 
    top:-100px; 
    left:0;

-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
     -o-animation: fadein 2s; /* Opera < 12.1 */
        animation: fadein 2s;
}

If you want the divs to fade in from top to bottom at different speeds, assign each div a unique class name and create selectors for each with the animation css property varying in duration (the last five lines in the selector above). Start with the fastest speed (e.g., 0.2s) and gradually increase it for subsequent divs (all code should be within one CSS file)

Using jQuery:

Add all divs into an array and then animate each one with increasing delays

$(document).ready(function() {
    $(".anim").each(function(index, value) {
        $(value).fadeTo(index * 1000, 1);

    });
});

You can adjust the fading time by manipulating the delay (try index * 2000 instead of 1000). Ensure that the initial opacity is set to 0 before fading in

Example

Answer №2

To achieve this effect using Css3, all you have to do is modify the className of your HTML element.

.beforeTransition {
    opacity: 0;
    width:100%; 
    position:absolute; 
    top:-100px; 
    left:0;
    transition: all 1s ease-in-out;
}

.transitionEffect {
    opacity: 1;
    width:100%; 
    position:absolute; 
    top: 0px; 
    left:0;
    transition: all 1s ease-in-out;
}

Answer №3

To display supplements one at a time:

    var display_time = 0;

    function display_item(item) {
        item.addClass('after');
    }

    $(".animation").each(function (index) {
        var item = $(this);

        setInterval(function () {
            display_item(item);
        }, display_time);

        display_time += 500;
    });

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

Toggle the visibility of multiple divs by clicking on other divs

I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...

javascriptjqueryhtml

The best practices for utilizing both Id and class within a single HTML element

Below you'll find a snippet of code: <form> <div class="form-group"> <label for="inputEmail">Email</label> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div> <div ...

htmlcssbootstrap-4

Customizing Paths in Express Handlebars

I have a query regarding setting up custom folders in Express.js Here's my situation: I need to implement logic where if a specific name is present in my database, the paths for CSS and JS files should be altered before rendering. By default, my pat ...

javascriptcssnode.jsexpresshandlebars.js

Is there a way to prevent camera motion in three.js when the escape key and directional keys are activated?

While working on my project with Pointer Lock Controls, I came across a bug. When the player is pressing any directional keys on the keyboard and simultaneously presses the escape button to turn off the Pointer Lock Controls, the camera continues to move ...

javascriptthree.jspointerlock

Issue with Three.js Raycaster failing to intersect with a custom vertex shader

I'm currently working on implementing a particle system using a dedicated Vertex shader. I have provided a code example for reference: https://jsfiddle.net/dthevenin/7arntcog/ My approach involves utilizing a Raycaster for mouse picking to enable int ...

javascriptthree.js

Guidelines for refreshing owl carousel on ng-click using AngularJS

I am encountering a significant issue with the use of an owl carousel in angular.js. It functions properly the first time, but when I have buttons on the same page and need to rebuild the owl carousel upon clicking a particular button with new data, that&a ...

htmlangularjsowl-carousel

JavaScript generated by PHP not functioning on IE version 7 and above

I've been experimenting with JavaScript generated from PHP, but I've run into issues specifically with Internet Explorer. While other browsers such as Firefox and Chrome have successfully processed and executed the JS code. As an example, you ca ...

phpjavascriptheadercontent-type

Having difficulty uploading an image to Facebook through the graph API

I have a requirement to upload a photo to Facebook using the Javascript SDK, but I am experiencing some difficulties: Firstly, FB.login(function (response) { if (response.authResponse) { va ...

javascriptfacebookfacebook-graph-api

Opacity in IE 8 will impact every child element within

I need to apply opacity to a div element. Here is my current CSS: background: rgb(255, 255, 255); /* Fallback for non-rgba supporting browsers */ background: rgba(255, 255, 255, .7); filter: alpha(opacity=70); /* For IE 7 and older versions */ -ms-filter: ...

cssinternet-explorerinternet-explorer-8opacity

Unresolved error causing promise to throw an exception

My code is causing an error when resolve is called: Possibly unhandled Error: undefined at Promise$_rejecter (c:\projects\Test\promiseftp\node_modules\bluebird\js\main\promise.js:602:58) at WriteStream.<a ...

javascriptnode.jspromisebluebird

"AngularJS offers a unique way to include alternative text in placeholders and titles using

I need to implement an input field (<input..>) with a placeholder and title for tooltip that functions in the following way: There is a variable called "myString" which can either be undefined/empty or contain a string. When empty, a default string ...

javascriptangularjs

How to stop the overflow scrollbar in a grandchild element with CSS grid

Encountered an unusual issue while using a combination of CSS grid and overflow auto. In the scenario where there are 3 elements, the outermost element has display: grid, the middle element has height: 100%, and the innermost element has both height: 100% ...

csscss-grid

Make sure to validate onsubmit and submit the form using ajax - it's crucial

Seeking assistance for validating a form and sending it with AJAX. Validation without the use of ''onsubmit="return validateForm(this);"'' is not functioning properly. However, when the form is correct, it still sends the form (page r ...

javascriptphpjqueryajax

Implementing the Disabled Attribute on a Dynamically Generated Button Using React

My QWERTY keyboard is dynamically rendered through a component as Bootstrap buttons using bootstrap-react. Each button does not have an ID to avoid relying on IDs in React. When a letter button is clicked, it triggers an onClick event passed as props back ...

javascripthtmlreactjsjsxreact-bootstrap

Next step is to retrieve previous store information

As a newcomer to the world of Javascript and Reactjs, I encountered an issue while attempting to execute multiple actions upon clicking a button. The first action successfully updates the store data, however, the second action seems to be using the old sto ...

javascriptreactjsreduxmaterial-ui

Turn off the "interaction failed" message in discord.js

When an interaction, such as a button click, is left unanswered, Discord will show "interaction failed" in the client. The expected action: inter.reply('stuff') My preferred action: inter.channel.send('stuff') I am not receiving an e ...

javascriptnode.jsdiscorddiscord.js

Using the excel.js module in conjunction with node.js to create distinct columns within a header row

I am facing an issue with Excel.js while trying to add a header row to a CSV file. It seems that all the columns in the row are getting merged into one cell instead of staying separate. Does anyone know how to properly separate the columns? https://i.sst ...

javascriptnode.jsexcelcsv

Angular 4 Password Regular Expression Not Working

My validation regex checks for at least 8 characters, including one number, one uppercase letter, one lowercase letter, and one special character. Here is the regex I am using: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?& ...

javascriptangular

Sorry, Laravel 8 module form error: The POST request is not allowed on this route. Only GET and HEAD methods are supported

**I'm having trouble understanding routes and how to specify the path. ** web.php - this route is located inside my module named events <?php use Illuminate\Support\Facades\Route; Route::prefix('event')->group(fu ...

phphtmlmodulelaravel-8

Dividing a string into an array and displaying it in a table using Laravel

Retrieving a string from the database and using the explode function to split the values. Below is the code snippet: $data = DoctorRegistration::select('products') ->where('doctorid','=',$doctorid) ->get(); ...

javascripthtmlajaxlaravel