"Text should be like a hidden secret, unseen yet powerful

Greetings! I have created an animation using Jquery

However, I am facing an issue where the .text is visible while my info span is appearing and disappearing

I need to retain that class in my .alert span

In essence, what I am aiming to achieve is to make the text class white in an invisible alert box as it appears and disappears

Below is my code. Apologies for any language errors.

wiro_notify

$(document).ready(function () {
  $("body").html(
    '<span class="alert" id="success"><i class="fal fa-check icon"></i><span class="text"></span></span>'
  );
  $(".text").text("Successful");
  var width = String($(".text").width() + 105) + "px";
  var min = $(".text").width() + 105;
  $("#success").animate({ bottom: "25%" }, 1000);
  if (min < 200) {
    $("#success").animate({ width: "200px" }, 1000);
    $(".text").css("margin-left", "10px");
  } else {
    $("#success").animate({ width: width, "margin-left": "5px" }, 1000);
    $(".text").css("margin-left", "7px");
  }
  $("#success").delay(4000).animate({ width: "80px" }, 1000);
  $("#success").animate({ bottom: "0", "min-width": "80px" }, 1000);
});
* {
  margin: 0;
  padding: 0;
  color: white;
}

body {
  width: 100%;
  height: 120vh;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: black;
}

.alert {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  position: absolute;
  bottom: 0;
}

.icon {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  text-align: center;
  font-size: 50px;
  padding-top: 15px;
  box-sizing: border-box;
}

.fa-check {
  background-color: rgb(3, 182, 3);
}

#success {
  background-color: rgb(0, 153, 0);
}

.text {
  margin-left: 7px;
  font-size: 30px;
  text-align: center;
  position: absolute;
  bottom: 32%;
  white-space: nowrap;
  font-family: "Source Sans Pro", sans-serif;
}
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap"
  rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body></body>

javascripthtmljquerycss

Answer №1

Here's a JavaScript snippet for you:

Include this code in your JS file:

$(".text").css("color", "transparent");
setTimeout(function() {
  $(".text").css("color", "white");
  setTimeout(function() {
    $(".text").css("color", "transparent");
  }, 5000);
}, 1000);

This piece of code sets the color of .text to transparent initially. Then, using setTimeout, it changes the color from transparent to white after 1000 ms (right when the green element appears). Subsequently, with another setTimeout, it switches the color back to transparent after 5000 ms (just before the green element disappears).

$(document).ready(function() {

  $("body").html("<span class=\"alert\" id=\"success\"><i class=\"fal fa-check icon\"></i><span class=\"text\"></span></span>");
  
  $(".text").text("Successful");

  var width = String($(".text").width() + 105) + "px";
  var min = $(".text").width() + 105;

  $("#success").animate({
    "bottom": "25%"
  }, 1000);

  if (min < 200) {
    $("#success").animate({
      "width": "200px"
    }, 1000);
    
    $(".text").css("margin-left", "10px");
  } else {
    $("#success").animate({
      "width": width,
      "margin-left": "5px"
    }, 1000);
    $(".text").css("margin-left", "7px");
  }

  $("#success").delay(4000).animate({
    "width": "80px"
  }, 1000);

  $("#success").animate({
    "bottom": "0",
    "min-width": "80px"
  }, 1000);

  $(".text").css("color", "transparent");

  setTimeout(function() {
    $(".text").css("color", "white");
    
    setTimeout(function() {
      $(".text").css("color", "transparent");
    }, 5000);
  }, 1000);
});
...

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

Arranging arrows in a horizontal alignment next to a column of images

Here is the div structure with two arrows positioned on top and bottom. I am trying to center the two arrows slightly towards the column of images. How can I achieve this? Link to a JSFiddle for reference: Fiddle I attempted the following CSS code, but ...

htmlcss

Sending an Angular $http post request to a MVC action but the parameter is coming through as

After posting this content: $http.post(Common.blog.save, { blog: blog }) .then(saveBlogComplete) .catch(function(message) { }); The Fiddler output I receive is as follows: {"blog":{"title":"Chicken Is Good","content":"#Chicken Is Good\ ...

javascriptasp.net-mvcangularjs

I am facing issues with utilizing if endif for my Internet Explorer stylesheet in HTML/CSS

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <link rel="StyleSheet" href="style.css" /> Whenever I apply this code, the content in Internet Explorer is being influenced by both style.css and ie. ...

cssinternet-explorer

How to remove the parent.parent.parent element when a button is clicked in Angular without utilizing the element's ID

I am currently developing a website where users should have the ability to delete li-elements with just one click. These li elements are contained within bootstrap containers, which means that when deleting, I want to remove the entire container along with ...

htmlangulartypescript

Experience seamless transitions with Material UI when toggling a single button click

When looking at the examples in the Material UI Transitions documentation, I noticed that there are cases where a button triggers a transition. In my scenario, I have a button that triggers a state change and I want the previous data to transition out befo ...

javascriptmaterial-uitransition

Transmit JSON data from socket.io client to Vue.js Component

Just like the issue mentioned here, I am facing difficulty in displaying socket.io-client data on a Vue.js component. Despite logging correctly to the console, the data is not showing on the page. Unlike the referenced case which dealt with an array, my da ...

javascriptnode.jsvue.jssocket.io

What is the best way to display multiple results using ajax when fetching data from a json array?

Here is a query I am working on: $result = mysql_query("SELECT * FROM ship_data WHERE id = $ship") or die(mysql_error()); $rows = array(); while($r = mysql_fetch_assoc($result)) { $rows = $r; echo json_encode($rows); } Additionally, I have this snip ...

phpjquerymysqlajaxjson

Extract information from a JSON string using a foreach loop to handle multiple occurrences of the same data type

I am working with a JSON object that I need to parse in order to retrieve specific data. The structure is as follows: "id": "5019b4b40cd8a056446b8eb4", "checkItemStates": [ { "idCheckItem": "xxxxxxxx", "state": "complete" }, { "idCheckItem ...

javascriptjsonparsing

Applying CSS styling to PHP documents

I am a beginner, so please go easy on me. I am looking to style variables like $product_name, $author, and $details. I was thinking of styling the echos, but in this scenario, the only echo is: <?php // Establish connection with the MySQL database ...

phpcsswhile-loop

Issue with displaying bound value in AngularJS textbox

Hello! I am currently working on an AngularJS application and have encountered a puzzling issue. I am attempting to bind a value to a textbox using the following code: <ul> <li ng-repeat="screen in screenMap"> <input type="text" ...

javascriptangularjs

Error: The function clickHandler has been referenced before it was declared or it has already been declared

Since I started using JSLint, I have encountered the common issues of "used before defined" and "is already defined." While I found solutions for some problems, I am currently stuck. Here is a snippet of my code: var foo; foo = addEventListener("click" ...

javascriptjslint

Angular 2 Dropdown Multiselect Plugin - Fully Customize Width to 100%

Currently working on integrating the angular-2-dropdown-multiselect component: https://www.npmjs.com/package/angular-2-dropdown-multiselect The component functions correctly, but I am looking to adjust its width to fit the container... I believe simply ...

csstwitter-bootstrapangular

Navigate to the recently added entry using Router.push in your NextJS/Supabase project, leading to no return value

In the process of developing an application that allows users to register shipments between different locations, I encountered a roadblock. Once a user creates a new shipment and saves it, they should be able to add goods to it. However, despite my efforts ...

javascriptnext.jssupabase

Creating dynamic movement on webpages using CSS3 Animations

Exploring the world of CSS animations is such a blast! I've created this fiddle to play around with the concept of wheels on a bus. Check out my JS Fiddle here One strange thing I noticed is that sometimes there's a white space between the two ...

csscss-animations

Look for specific content within a div tag and display that div at the top of the page

<div class="search-container"> <input type="text" class="input-medium search-query" placeholder="Search"> <button type="button" class="btn">Search</button> </div> <div class="panel panel-default"> ...

jqueryhtml

Unable to access data from the Array by passing the index as an argument to the method

Having trouble retrieving an item from an Array using method() with an index argument that returns undefined export class DataService { public list = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, ...

javascripttypescript

Issue with jQuery Ready Event Not Triggering Following AJAX Load

Excuse me, could you help me with something? I have tried to find an answer for this issue but it is still not working. Here are my scripts: $(document).ready(function() { $('.gifs').gifplayer(); }); I also have dynamic content loaded by AJAX ...

javascriptjqueryajax

The text becomes distorted and unreadable after the function is applied. It is impossible to decipher the message

There is a function called getResourceText(''), which takes a key as an argument. This function provides a translation of the requested text when it is called. setFilterName = (isFilterChanged, buttonId, filterName) => { switch (filterName ...

javascriptreactjs

Locate identical values within an array in MongoDB, even if they exist independently of an object

{ "_id" : ObjectId("15672"), "userName" : "4567", "library" : [ { "serialNumber" : "Book_1" }, { "serialNumber" : "Book_2" }, { "serialNumber" : "Book_4" } ...

javascriptarraysmongodbmongodb-queryaggregation-framework

HTML not rendering Angular object as expected

Having trouble with my Angular project on LinkedInLearning. Can't seem to display object properties in my component, even though I can see them when logging the object. The boolean value renders fine, but not the object properties. Here is the snippe ...

javascripthtmlangularoop