Steps for including an animation class in a div

Is it possible to add the sweep to top blue color animation to the red box using a set-timeout function instead of hover? I tried using the following code but it doesn't seem to be working. Can you help me troubleshoot?

setTimeout(function() {
  $('.hvr-sweep-to-top').addClass('add');
}, 8000);
.hvr-sweep-to-top {
  height: 150px;
  width: 150px;
  background: red;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.hvr-sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.add {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hvr-sweep-to-top">

</div>

javascriptjquerycss

Answer №1

When you add the hover class, make sure to include the script at the bottom of your page within the document.ready function. In this example, the color changes to blue after two seconds:

$( document ).ready(function() {
setTimeout(function() {
$('.hvr-sweep-to-top').addClass('new');
}, 2000);
});
  .hvr-sweep-to-top {
  height: 150px;
  width: 150px;
  background: red;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.new:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(1);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}



.add {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 
  
  

  

  
</head>
<body>

<div class="hvr-sweep-to-top">


</body>
</html>

Answer №2

Consider including

let newText = setTimeout(function() {
  $('.hvr-sweep-to-top').addClass('new-class');
}, 8000);

I'm uncertain about this approach!

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

Having trouble getting the jQuery AJAX post syntax to work properly

I am trying to send a post json value to another page using AJAX. However, when I include the "json" parameter in my POST request, the JavaScript code stops working. If I remove the "json" parameter, it works fine. I am still learning jQuery so any help ...

javascriptjqueryajaxjson

The ngOnInit function is not triggered upon instantiation of an Injectable class

What could be causing the ngOnInit() method not to be called upon resolution of an Injectable class? Code import {Injectable, OnInit} from 'angular2/core'; import { RestApiService, RestRequest } from './rest-api.service'; @Injectable ...

javascriptangulartypescript

Ways to eliminate the yellow highlighting on a row

In my current application, I am incorporating jqGrid and aiming to apply custom styling to it. To start, my objective is to eliminate the yellow highlighting effect that appears when clicking on a row in the jqGrid css. Despite my attempts, I have been u ...

jquerycssjqgrid

What is preventing the addition of links to the navigation bar when using a sticky navigation bar?

Currently, I am in the process of developing a blog website using Django. One of the features I have successfully implemented is a sticky navigation bar. However, I am facing a challenge with adding links to the menu on the navigation bar due to existing ...

javascriptpythonhtmlcssdjango

Unable to set the height for ul/div elements

I'm struggling to make my navbar appear when I click the "menu button". The div seems to be present in the code, but with a height of 0. Here's the relevant section of the code causing the issue. Any suggestions on how I can resolve this? var ...

javascripthtmlcssheight

React encountered an unexpected end of JSON input while streaming JSON data

Currently, I am facing a challenge with streaming a large amount of data from a NodeJS server that retrieves the data from Mongo and forwards it to React. Due to the substantial volume of data involved, my approach has been to stream it directly from the s ...

javascriptnode.jsreactjsstream

Include a personalized header in $http

In my factory, I have multiple functions that follow this structure: doFunction: function () { return $http({ method: 'POST', url: 'https://localhost:8000/test', data: {}, headers: { "My_Header" ...

javascriptangularjspost

The script is malfunctioning on Google Chrome

Below is a script that I have: EXAMPLE : <script> var ul = document.getElementById("foo2"); var items = ul.getElementsByTagName("li"); for (var i = 0; i < items.length; i=i+2) { // perform an action on items[i], which repr ...

javascripthtml

How to use jQuery to dynamically set the value of a column span in a

Struggling with setting the value for a table column span. Here is my jQuery code: $('tr td data-th=Name span').val('My span content...'); This is how my HTML appears: <tr> <td data-th="Name"><span class="edit-inpu ...

javascriptjqueryhtml

Tips for initiating a browser file download using JavaScript, ensuring that the download is only carried out if the web service responds with

For a project I am working on, I need to create JavaScript code that will be triggered by clicking on an <a> element. This code will then make a GET request to a web service that I am currently in the process of coding. Once the service returns a fil ...

javascriptjqueryajaxweb-servicesget

Is it possible to programmatically bind a click event to each individual word in a div element?

I'm attempting to link each word within an element without altering the markup inside the element using Javascript. ...

javascriptjqueryhtml

Troubleshooting lack of output in Console.log (NodeJs)

I am facing an issue where I can't see any output when trying to console log a JavaScript code using Node.js. const pokemon = require('pokemon'); pokemon.all(); var name = pokemon.random(); console.log(name); I am unable to even display a ...

javascriptnode.jsjsonbackendweb-deployment

Is it possible to place a list/accordion above a button in Semantic UI?

Check out this rough code sandbox here There seems to be an issue with the accordion overflowing behind the button on the left side. I attempted to add style={{position: 'absolute', bottom:'2%', overflow: 'scroll'}} to the A ...

javascripthtmlcssreactjssemantic-ui

"Troubleshooting a recurring problem with injecting images in jQuery

I have multiple divs with the class nectar-post-grid-item and I am using jQuery to insert an image into them. This process works well. Additionally, I have an AJAX load more button that fetches and displays more divs on the page. I want to include the inje ...

jquery

`Incorporating width and vertical alignment in an image`

I am trying to figure out a way to make the image fill up 100% of the width, aligning it vertically with the text below. The code I'm working on is for email newsletters using foundation. Check out my Example Site Unfortunately, I can't seem to ...

htmlcsszurb-foundation

Retrieve the JSON array embedded within the JSON string

Can someone help me extract the JSON array from a JSON string? I've been struggling to make it work. Here is the code snippet for reference: // I need assistance with this var all_barcodes = '{"VAM12345":{"colour":"red","size":"32"},"VAM456789" ...

javascriptjqueryjson

Exploring component method variables with Jest testing

Imagine a scenario where there is a class component with the following structure: export class Math extends React.Component { ... someComponentMethod = numb => { const sample = numb * 10 ... const result = numb -5 ...

javascriptjasminejestjstddenzyme

Mastering @media queries to dynamically alter widths in prop styled components

I have a unique component that utilizes an object with its props for styling. const CustomSection = ({ sectionDescription, }) => { return ( <Text {...sectionDescription} content={intl.formatMessage({ id: &apos ...

cssreactjs

Troubleshooting problems with AJAX call in custom validation for Knockout JS

I have created a custom validation function that checks whether a zip code entered in a form field is valid for the selected state from a dropdown. The validation works correctly when I initially select a state and then input a zip code, but if I change th ...

javascriptajaxvalidationknockout.js

Deleting an item from a serialized array using jQuery

I am currently exploring methods to remove an item from a serializedArray based on its index. Take the following scenario: [ { 'name' : 'item1', 'value' : '1' }, { 'name' : 'item2', &ap ...

jqueryarraysserialization