Guide to Displaying Items in Order, Concealing Them, and Looping in jQuery

I am trying to create a unique animation where three lines of text appear in succession, then hide, and then reappear in succession. I have successfully split the lines into span tags to make them appear one after the other. However, I am struggling to find a way to hide them all at once and repeat the animation.

This is the structure of my HTML:

<span class="flexi-link" id="title-1">Link 1</span>
<span class="flexi-link" id="title-2">Link 2</span>
<span class="flexi-link" id-"title-3">Link 3</span>

This is the jQuery code I am using:

$('#title-1').delay(1000).show(0);
$('#title-2').delay(2000).show(0);
$('#title-3').delay(3000).show(0);

If you'd like to see the animation in action, you can check out this FIDDLE: http://jsfiddle.net/TtKnK/

javascriptjquerycssloopsshow-hide

Answer №1

utilizing the setInterval() method

give this a shot

setInterval(function(){
  $('.flexi-link').hide();
  $('#title-1').delay(1000).show(0);
  $('#title-2').delay(2000).show(0);
  $('#title-3').delay(3000).show(0);
},"4000");

check out the fiddle here

Answer №2

Give it a shot using setTimeout along with a callback function

Answer №3

actions = [
    function() {$('#action-1').show(0);},
    function() {$('#action-2').show(0);},
    function() {$('#action-3').show(0);},
    function() {$('.custom-link').hide(0);},
]

var executeAction = function(index) {
    actions[index]();
}

var timedExecute = function(delay, actionIndex) {
    actionIndex = actionIndex || 0;
    executeAction(actionIndex);
    setTimeout(timedExecute, delay, delay, (actionIndex+1)%actions.length);
}

timedRun(1000)

http://jsfiddle.net/TtKnK/17/

NOTE: The use of functions instead of DOM elements allows for flexibility in code insertion. jQuery can be further utilized to enhance performance according to expert advice.

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

Can you explain the differentiating factors of a document and the DOM?

I recently read an article discussing the distinction between jQuery's bind() and live() functions. You can check it out here: http://msdn.microsoft.com/en-gb/scriptjunkie/ee730275.aspx (specifically the Live and Let Die section). The bind function ...

jqueryeventsdomdocument

Implementing a JSON array to object conversion in an Express REST API

After conducting a test on a REST API using Postman, the outcome was as follows: { "success": true, "message": "success", "data": [ { "id_buku": 9, "judul_bu ...

javascriptnode.jsrestexpress

Subscriber client successfully activated and operational via the command line interface

I have incorporated a script into my PHP file that reads the Pusher channel and performs various actions when a new event occurs on the specified channel. If I access the following URL in my browser: http:/localhost/pusher.php and keep it open, the p ...

javascriptphpnode.jspusher

Tips for avoiding a crash when trying to access a non-existent key using an ordinal number

The output of the code snippet below is "Cat" and undefined. *When a key does not exist in an object, the result will be "undefined". var animals = {"mammals": ["Cat", "Dog", "Cow"]}; var groupA = animals.mammals[0]; var groupB = animals.birds; console.log ...

javascriptarraysjsonundefined

Is there a way to completely remove an element from the dom once the ajax call has returned

I've been struggling to completely remove LI elements and their content, including the checkbox input, from the DOM without success. After an ajax callback, I am calling the following function, but it only removes the contents and not the element its ...

javascriptjqueryhtmldom

Adding up the values of an array of objects by month using ReactJS

To start off, I'm using ChartJS and need to create an array of months. Here's how it looks: const [generatedMonths, setGeneratedMonths] = useState<string[]>([]) const [totalValues, setTotalValues] = useState<number[]>([]) const month ...

javascriptarraysreactjschart.js

Using jQuery .sortable() to reorder list items and update their IDs based on their new positions

My apologies for my limited English skills, but here is what I am trying to achieve. I have a list structured like this: <ul id="sortable" class="sortable"> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> &l ...

javascriptjqueryjquery-uijquery-ui-sortable

Tips for converting JSON information on a website and inserting it into a designated division?

I've recently delved into front-end development, searching for solutions and hints without much success. I'm currently in the process of building my first website, specifically a "find recipes" website. Lacking knowledge of API calls, I created a ...

javascriptjqueryhtmljsonajax

Retrieve the HTTP Code and Response Header for a successful AJAX request

I am attempting to retrieve the HTTP Response Code/Response Header from my AJAX request. Below is the initial script I used: $("#callContact1").click(function() { $.ajax({ url: "https://www.server.com?type=makecall", data: {}, type: ...

javascriptjqueryajax

Adjusting canvas context position after resizing

I've been experimenting with using a canvas as a texture in three.js. Since three.js requires textures to have dimensions that are powers of two, I initially set the canvas width and height to [512, 512]. However, I want the final canvas to have non-p ...

javascripthtmlcanvasthree.js

Updating borderWidth dynamically in react native fails to produce the desired effect

Here is the code I am working with: const [focused, setFocused] = useState(false); <TextInput style={{ ...styles.inputStyles, borderColor: `${focused ? colors.darkPurple : "#b8b8b850"}`, borderWidth: `${focused ? 3 : 1}`, }} placeh ...

cssreact-nativebordertextinput

Utilize Ajax datatable to showcase information in a visually interactive format

I've been grappling with this problem for an entire day. Essentially, I have a table and I need to pass data in a multidimensional array $list through a datatable using AJAX. This way, I can JSON encode it and send it back for display: $('#table ...

javascriptphpjqueryajaxdatatable

Issue encountered: React module not detected while attempting to execute npm start command

While developing my react app, I encountered an issue when trying to run 'npm start'. The application was working as expected until I faced a bug that prompted me to update my node version for a potential fix. After upgrading to node v16.13.2 and ...

javascriptnode.jsreactjsnpmnode-modules

Implementing JavaScript logic to proceed to the following array within a 3D array once a specific condition is met

I'm currently tackling a challenge that requires me to obtain a specific number using a given 3D array. This array consists of 2D arrays, each containing the same number repeated x times. The parent array is sorted from largest to smallest. Here&apos ...

javascriptarrays

What causes the modal to appear and then vanish suddenly?

I've created a simple modal code with minimal JS involved. When the button is clicked, the modal appears briefly, then the page refreshes and the modal disappears. I'm not sure what could be causing this issue. Any help would be appreciated! h ...

javascriptcssbootstrap-4modal-dialog

Rendering HTML is not supported by AngularJS on Android 19 with version 4.4.4 and Safari 8.0.5

I have been working on an AngularJS app that is being displayed in a Webview on Android. Everything was functioning properly until yesterday when I started encountering issues with Angular not rendering the DOM correctly. I have tested the app on various v ...

javascriptandroidangularjsdomsafari

When a table cell is hovered over, a left border will be added

I've been working on adding a left border to the text in a way that highlights the first cell's border when hovering over a row, providing a clear indication of the current row for users. Feel free to check out my progress so far on this fiddle: ...

htmlcss

Issue: Unable to locate element with the specified selector: #email

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://discord.com/register'); await page.screenshot({path: 'b.png ...

javascriptnode.jsdiscordpuppeteer

Issue with jquery .height(value) function not functioning properly on Internet Explorer

I have come across a challenge with the following code snippet: var winheight = $(window).height(); var headerHt = (0.11 * winheight); $(".header").height(headerHt) The purpose of this code is to dynamically adjust the size of .header and other elements ...

cssevent-handlingjquery

No files located by the server

My experience with writing a basic express script to serve a webpage with embedded Javascript has been quite frustrating. The server seems to struggle finding the files I provide, and what's even more aggravating is that it sometimes works but then su ...

javascriptnode.jsexpress