Remain concealed once the lights dim

Looking for a way to fade out a logo in a preloader div after a call, but having issues with it becoming visible again once fully faded out. Ideally, I would like to keep it faded out or set it to display none using only CSS, although I can use jQuery if necessary.

&.preloader-remove{
            -webkit-animation: fadeOutUp 1s;
            animation: fadeOutUp 1s;
        }

Css Animation

@-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);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

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

Answer №1

To enhance your design, consider implementing a css transition instead of an animation:

&.loader-remove {
    position: relative;
    top: 50px;
    opacity: 0;
    -webkit-transition: top 1s, opacity 1s;
    transition: top 1s, opacity 1s;
}

Answer №2

Check out this jQuery API reference on fading elements: http://api.jquery.com/fadeout/

.fadeOut() Summary: This method is used to gradually hide the selected elements by making them transparent.

$( "#clickme" ).click(function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

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

What could be causing my website's screen resolution to not fit properly on mobile devices?

Initially, the resolution perfectly matched the width of mobile devices. However, after changing the background image, for some reason, the width no longer fits the device length precisely. I've tried resetting to a point where the resolution was fine ...

javascripthtmlcssresolutionscreen-resolution

What are some creative ways to design the selected tab?

In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...

javascripthtmlcssvue.js

Date selection tool malfunctioning - unexpected behavior

Struggling to identify where I'm making mistake. The dynamically created input fields with the "freeze-date" class seem to only function correctly on the initial datepicker input field that's generated. You can find the code over at http://jsfidd ...

jquerydatepicker

Struggling to keep text aligned to the left?

Check out the image at in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the icon without any movement even if ...

htmlcsscss-position

There seems to be a problem retrieving the JSON file

My JavaScript file is designed to fetch a JSON file and execute a function if successful. If there's an error, it should display an alert window with the message "error". However, despite checking the syntax, I keep receiving an error alert every time ...

javascriptjqueryhtmljson

Roughly one out of every 500 users tend to send GET requests instead of POST

We have implemented the following AjaxSetup configurations: $.ajaxSetup( { cache: false, type: 'POST', contentType: "application/json", data: "{}", headers: { "Accept": "application/json; charset=utf-8" }, beforeSend: fun ...

jqueryajaxpostget

Establish a comprehensive background for your Angular project

I've been struggling to figure out how to set a background image for my entire angular project. I've tried using global css and the app.component.css file, but it only sets the background for the component area. Here is a snippet from my global ...

cssangularbackground-image

Having trouble getting a DIV to appear on top of another DIV containing an image

I need help with positioning an "InfoBox" above the main header image on my website. Despite trying z-indexes and adjusting position, I can't seem to get it right. If anyone has any suggestions, please share. Thank you! For reference, here is the HTM ...

csshtml

Absolute positioned TD creates a gap upon being displayed

Hey there, I am facing an issue with a table I have. In each row (TR), the last TD element has a class called 'abs'. The style for this class is specified in the provided code snippet. Initially, this element is hidden. However, when you hover o ...

jqueryhtmlcss

Arranging several lists in a row without any specific order

I am trying to arrange multiple <ul> elements on the same line to create a shop-like display for products. Currently, I have set up several unordered list tags: ul { display: inline; } li { list-style: none; } <ul> <li>& ...

htmlcss

What could be causing the iPhone to trim the 20px right padding of my website?

Essentially, here's the situation: Browser: Iphone (the issue doesn't occur in Android): My current setup includes: <meta name="viewport" content="user-scalable = yes"> Here is the corresponding CSS: html, body, #wrapper { height: 1 ...

iphonecss

Changing the background color of the legend text when hovering over a d3 doughnut chart

I have a doughnut chart that displays values on mouse hover. However, I would like to change the background of the legend text when hovering over the respective area of the doughnut chart. return { restrict: 'E', scope: { values: ...

htmlcssangularjsd3.js

Google Map with rounded corners that have a transparent design

Trying to create a circular Google map using CSS3 border-radius, but having issues with browsers other than Firefox. Here's the code snippet: <div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;"&g ...

cssgoogle-maps-api-3

Exploring Checkbox Limiting with jQuery

Is there a more efficient approach to restrict the selection of checkboxes? I want the script to be adaptable depending on the applied class, which will always indicate the maximum allowed value (e.g., "limit_1" or "limit_2"). Currently, I'm creatin ...

javascriptjquerycheckboxautomation

Energetic flair for Vue animations

I am currently developing a VueJS sidebar component. The objective is to allow the parent to define a width and display a toggle button that smoothly slides the sidebar in and out. Here is an example: <template> <div class="sidebarContainer ...

javascriptcssvue.js

Using Angular to click and scroll to a component on a web page

Hello, I am attempting to create a basic navigation bar with a few link buttons. I would like it so that when I click on a button, it scrolls to the correct component. I am aware that this can be achieved using jQuery and ScrollTo(), but since my HTML is n ...

jqueryangularscrollscrollto

Explore ways to incorporate special symbols in a jQuery array

I'm looking to include special characters in a jQuery array. I'm not quite sure how to do this. Currently, my code is: $scope.categories = ['Red', 'White', 'Rose', 'Sparkling']; and I would like it to be: ...

jqueryarraysangularjs

Send JSON data that has been refined utilizing jQuery

I am attempting to create a filtered JSON response using jQuery following a successful GET request of the original JSON response. The initial JSON response is an array of products from our Shopify store for the specific collection page the user is viewing. ...

javascriptjqueryjsonajax

CSS: Creating a block that stretches the entire width of its parent block

I've been facing the same issue multiple times. Whenever I use the float property to display one block, the next block ends up overlapping with the first one. For example: Consider the following block of code: .row_item{ width: 30%; display: block; ...

htmlcsscss-float

Utilizing a dynamic URL to set the background image of a div element (with the help of

Currently, I am in the process of designing a user registration page that allows users to input an image URL and view a preview of the image within a designated div. The div already contains a default image set by a specific class. The HTML code for displa ...

jqueryhtmlcssimage