Step-by-step guide on creating a sequential glowing effect for list items with CSS and JQuery

I would like to create a glowing effect on each icon individually. The idea is for each icon to glow for a brief moment and then return to its normal state before moving on to the next icon in line. I am considering using text-shadow for the glow effect and potentially implementing a loop in JQuery to cycle through the list of icons.

<ul>
<li>
    <span class="fa-stack custom-icon">
      <i class="fa fa-circle fa-stack-2x one"></i>
      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
    </span>
</li>
<li>
    <span class="fa-stack custom-icon">
      <i class="fa fa-circle fa-stack-2x two"></i>
      <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
    </span>
</li>
<li>
    <span class="fa-stack custom-icon">
      <i class="fa fa-circle fa-stack-2x three"></i>
      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
    </span>
</li>

For CSS, I could use...

    text-shadow:0px 0px 40px #fff;

As for JQuery, I'm still exploring possibilities.

Any assistance or suggestions would be greatly appreciated :)

jquerycss

Answer №1

Simply incorporate a transition and watch it function smoothly

var a = [];
$("h1 a").each(function(index) {
  a[index] = $(this);
  setTimeout(function() {
    a[index].addClass('glow').delay(1000).queue(function(next) {
      a[index].removeClass('glow');
      next();
    });
  }, index * 1000);
});
a {
  color: #000;
  text-decoration: none;
  text-shadow: -1px 0px 1px rgba(150, 150, 150, 1);
  transition: all 0.5s ease-in-out;
}
h1 {
  text-align: center;
}
.glow {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<h1>
    <a href="#">welcome</a>,&nbsp;
    <a href="#">bonjour</a>,&nbsp;
    <a href="#">bienvenido</a>,&nbsp;
    <a href="#">benvenuto</a>,<br/>
    <a href="#">добро пожаловать</a>,<br/>
    <a href="#">willkommen</a>
</h1>

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

How can I activate the copy function in jQuery?

I'm trying to figure out how to initiate a copy event using JavaScript or jQuery. I need to be able to simulate the copy event by clicking on a button, but I haven't been able to find a solution yet. I want to avoid using ZeroClipboard or any oth ...

javascriptjquery

When a user clicks on a specific element's id, the image will rotate accordingly

When the elements in ul are clicked, the image rotates. The default position of the image is already rotated by a certain number of degrees, and on each click, it rotates to the desired value. This was achieved using the following code: $("#objRotates"). ...

javascriptjqueryrotation

What is the method for setting tabstops in XHTML?

Is there a way to create a tabstop in an xhtml webpage without using the "&nbsp;" method? I want to avoid putting a space between the ampersand and 'n'. Any suggestions? Edit: My initial post did not display the &nbsp;. I am looking for ...

htmlcssxhtml

Inheriting Internet Explorer's zoom level within the WPF web browser control

My WPF window hosts a web browser control for displaying html/css pages, but I'm running into issues with the zoom factor from Internet Explorer. The web browser control seems to be affected by IE's zoom level, causing distortion in the way my HT ...

c#htmlcsswpfinternet-explorer

New feature in Bootstrap 4 beta allows carousel arrows to be positioned outside of the

I created a text-based carousel using Bootstrap 4 beta. Is it possible to move the arrows off of the slider area and position them outside of it? I have tried searching on Google and in other forums, but I couldn't find a solution. The issue is that s ...

htmlcsstwitter-bootstrapcarouselbootstrap-4

Creating a Contact Form with Email Submission using Html and Php

Establishing Database Connection $server = 'localhost:8080'; $username = 'root'; $password = ''; $database = 'resort'; $connect = mysqli_connect($server, $username, $password ) or die(mysqli_error.&apos ...

phpjqueryhtml

Discover the HTML of a different website using Javascript

I'm currently developing a basic webcrawler that will display all the links found on a specified website. Here's what I envision my program doing: - enter a URL: http://www.example.com/ - the program retrieves the HTML source and locates all th ...

javascriptjqueryajaxcross-domain

The jQuery newsfeed is powered by the $.each() method

I'm having trouble setting up a newsfeed on my website. It's supposed to display all the current news and exclude any expired ones. I have a webpage where I can add news, so the JSON data is constantly changing. Here's an example of the PHP ...

javascriptjqueryjson

Encasing words within a cell of a table

My goal is to ensure that the table width remains fixed and unaffected by long text strings. Even though I have PHP code in place to limit characters at 100 per cell, I want to guarantee that a lengthy text string will never expand the table beyond its set ...

htmlcss

Avoiding the default action to submit AJAX form data won't result in any changes to the front end?

Currently, I am working with Flask and have utilized JavaScript to prevent default behavior in order to send all the necessary data through an AJAX request. However, I am facing an issue where although my view contains all the data (verified by console out ...

javascriptpythonjqueryflask

Tips for deactivating all JavaScript events on a webpage that has been loaded within an iframe

My website is equipped with various JS click/mouseover/mouseout/scroll events and incorporates several JS libraries to operate features such as carousels, bootstrap modal pop-ups, and more. I am looking to halt all events on a specific element. Although I ...

javascriptjqueryhtmladdeventlistenerevent-listener

Footer Design with Images in Bootstrap

Hi, I recently started using Bootstrap and I'm trying to add a fixed footer to my page with a logo that is taller than the footer itself. I want the footer and the image to be fixed at the bottom of the page, while the image extends beyond the footer. ...

htmlcsswebbootstrap-4

What is the best way to showcase a unique quote right when the webpage is opened?

I'm currently developing a random quote application. I want the quote to be displayed when the page loads instead of waiting for the user to click a button. I've tried invoking a function, but it's not working as expected. Any advice would b ...

javascriptjqueryrandomonloadquote

Is it possible to attach a CSS file specifically to just one React component?

Is there a way to restrict the CSS styling in my Home.js component so that it does not affect any other components? I have a separate CSS file for each component, but when I apply the styling from one file to Home.js, it ends up affecting everything else ...

cssbootstrap-5

What is the best way to switch between displays within an if-else statement?

I've been struggling to toggle the circle on click to reveal the checkmark and hide the circle. I've already implemented the hover effect in CSS where the circle disappears and the checkmark appears. HTML <p class="reme"> <a href="#" ...

jqueryhtmlcssfont-awesome

Is there a way to prevent a tag from being clickable on the entire row, except for the actual link itself?

My question is why, when using the a tag, the entire row on the right becomes clickable as well? Despite there being no link, the area at the back of the row on the right side is clickable. Is there any way to remove this clickable area? <a id="ba ...

htmlcss

The CSS hamburger menu halves in size when being closed

I have successfully created a CSS/JS hamburger menu with a transforming icon upon clicking. However, I encountered a bug where, upon clicking the 'close' button on the hamburger, the navigation menu cuts behind the header, resulting in a messy ap ...

javascriptcss

JavaScript keydown event for rotating images

I am experiencing an issue with JavaScript animation. I have incorporated code from this particular link into my keydown function. However, the code is not functioning as expected. While the code from the provided link works fine on its own, within the key ...

javascriptjquerybox2dkeydown

Using Jquery with an SQL data table

Currently in the process of learning Jquery and I am trying to display my SQL table on my webpage. My Jquery script is set up to match the structure of the SQL table, and my web.config file is configured correctly. However, the data is not loading when I t ...

jqueryasp.net

Utilize AJAX to dynamically load external content

Is it possible to retrieve content from an external website using jQuery's Ajax instead of an iFrame? I have been attempting to accomplish this, but it appears that there may be some issues related to cross-domain access. Is this correct? $('#r ...

jqueryajax