Animate the removal of a div message with the help of CSS and jQuery

To display a success message in PHP, I use the following code snippet:

<div class='alert alert-success'>Success!!</div>

In addition to that, I have implemented a CSS3 animation called Animate:

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
}

Now, my challenge is to make the success message disappear using the CSS Animation (fadeOutUp) after 5 seconds with jQuery. How should I go about achieving this?

javascriptjqueryhtmlcss

Answer №1

To hide an element, you can create a CSS class called "hide" which sets the opacity to 0 with a transition effect. Then, use JavaScript to add this class to your div.

Custom Style Sheet 

.hide {
  opacity: 0;
  transition: opacity 1000ms;
}

JavaScript

function fadeOut(el){
  el.classList.add('hide');
}

div = document.getElementById('yourDiv');
setTimeout(function(){
  fadeOut(div);
}, 5000);

HTML

<div id='yourDiv' class='alert alert-success'>Success!!</div>

For a live example, check out this codepen demo.

Answer №2

Are you searching for this particular solution?

setTimeout(animateUp, 5000);

function animateUp() {
    $(".alert").css({'-webkit-animation' : 'fadeOutUp 5s infinite'});
}

Alternatively, you can modify your .fadeOutUp CSS to

.fadeOutUp {
    -webkit-animation: fadeOutUp 5s infinite;
     animation: fadeOutUp 5s infinite;
}

Then proceed with 

setTimeout(animateUp, 5000);

function animateUp() {
    $(".alert").addClass("fadeOutUp");
}

JSFiddle

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

Tips for implementing a Jquery .keyup function on elements that are dynamically loaded via Ajax requests

On a specific page, I have elements that are loaded through ajax after user interaction. The issue I'm facing is that Jquery doesn't seem to recognize the newly loaded elements in order to work with the function refresh_current_items. This is m ...

jqueryajax

The Nginx location directive is failing to properly handle certain URLs

Currently, I have the following setup: location /ron-swanson-quotes/ { return 301 /ron-swanson/; } Along with a SSR React app in next.js. The redirect mentioned above works perfectly for site visitors who come from an external source, but it fails whe ...

javascriptnode.jsexpressnginxnext.js

Leveraging the search feature within Google scripts to manipulate arrays

I'm facing a challenge in developing a function to search for regex in a cell and return a specific value if the result is found. The function works fine on an individual cell, but I can't seem to get it to work when applying it as an array to ce ...

javascriptarraysgoogle-apps-script

Positioning the video tag bar in HTML is a crucial element to

**Take a look at what I'm discussing here(http://jsfiddle.net/VpLyR/). I'm dealing with a simple code that includes a video tag (html) and a menu bar with a fixed position. The issue arises when I scroll down to the point where both the menu bar ...

htmlcsspositionhtml5-video

Converting jQuery selectors into JSON objects

I would like to create a JSON object from a jQuery selector string, which is the text inside $(), without actually selecting elements from the DOM. Is there a built-in function in jQuery that can achieve this task or are there any open-source libraries ava ...

javascriptjqueryjsonregexobject

Having trouble importing OrbitControls in three.js with an error?

I'm currently working on localhost and I've encountered an issue while trying to import "orbitcontrols()" which is not functioning properly and displaying an error. Here is the error message main.js:1 Uncaught SyntaxError: Cannot use import stat ...

javascriptthree.js

Issues with AngularJS Opening the Datepicker upon Click

Currently, I am developing an application using AngularJS, JQuery, and Bootstrap. In this project, I have incorporated a customized date range picker from www.daterangepicker.com. Issue: The problem arises when I attempt to open the date range picker by c ...

jqueryangularjsbootstrap-4

What causes the default styling of a browser user agent to be altered when a background image is added to an input button?

Take a look at this example: http://jsfiddle.net/eJSGn/ input{ padding-left: 20px; } input:last-of-type{ background: url(http://skiorboard.com/wp-content/uploads/2014/03/search.png) no-repeat; background-size:15px 15px; } <in ...

htmlcss

Issue with AngularJS $broadcast not functioning when initializing

In the controller, there is HTML button code that attempts to call a specific function on click: <button ng-click="vm.openpopup()" ng-if="!vm.data.length" uib-tooltip="Add Business Value Chain" class="btn btn-default `enter code h ...

javascriptangularjs

Keep the button activated until all selection fields are completed

I am attempting to create a functionality where a button's status is enabled/disabled until the user selects options from 4 different select boxes. I came across this solution: LINK on Stack Overflow but I am unable to make it work for my case. Here i ...

jqueryhtmlselectbutton

Choosing a menu option with jQuery

Can someone help me with making a menu option selected in HTML? Here is my code: <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon"><img src="images/home.png" ...

jqueryhtmlcss

How can I make the columns in my table stand out with different background colors?

I'm currently working on implementing alternating background colors for columns in a table. I have successfully applied CSS to a simple table, but I am facing issues when dealing with more complex tables that involve rowspan and colspan. Can anyone of ...

htmlcsscss-tables

Trouble with HR functionality in Outlook email

<table> <tr> <td class="h1" colspan="12" style="font-family: 'proxima_nova_rgbold', Arial, Helvetica, sans-serif;font-size: 18px;text-align:center; padding-top:10px;padding-left:30px;text-transform: uppercase;padding-bottom: 8 ...

htmlcsshtml-table

Seeking guidance on utilizing jQuery to trigger changes in CSS properties upon

Just starting out with jQuery and hoping to find an easy script (or maybe a more straightforward approach) that allows for changing the CSS property of one element when another element is hovered over. For instance, hovering over this image could cause th ...

jqueryhtmlcsshover

What is the best way to make a table expand upwards when adding rows dynamically?

Is there a way to dynamically grow a table upwards from a fixed position instead of downwards? For example, if the first table row is at 100px, can the next one be at 110px? I'm looking for a solution to achieve this effect when adding table rows dyna ...

jqueryhtmlcss

How to send the chosen option value from a select tag in Python Flask

My user registration form features a select tag, and I'm trying to assign the value of the selected option to a variable using the code below: registration.html <form method="POST" action="/register"> <div class="form-group"> ...

pythonhtmlflaskflask-wtforms

Utilizing color schemes in your design: a step-by-step guide

Is there a way to utilize the custom color scheme defined in the theme export default createMuiTheme({ palette: { primary: { main: 'red', contrastText: '#ffffff' }, secondary: { main: 'green', ...

javascriptreactjsmaterial-ui

Tips for spinning HTML5 Canvas's background image and adjusting the zoom with a slider

As someone who is new to the world of coding, I have a few goals in mind: First and foremost, I want to create a canvas. I also aim to add a background image to the canvas. Importantly, this background image should be separate from any foreground images ...

jquerycsshtml5-canvas

Preventing form reload on route change in PHP

I've set up a basic form on my index.php page: <div class="form-container"> <form id="create-form" action="create.php" method="POST"> <label for="name">Name:</label> ...

javascriptphpjqueryajaxsingle-page-application

Steer clear of using ng-repeat while also maintaining two-way data binding

My web application is quite large, and I frequently utilize the ng-repeat directive to display lists of data. However, this has resulted in slow performance at times, which can be very frustrating. While I am aware of different methods to avoid using ng- ...

javascriptangularjsangularjs-ng-repeatone-time-binding