Rotate each row of the table in sequence with a pause between each flip

I have a table with 3 columns and 10 rows. I would like to flip each row one by one, where each row contains data on both the front and back sides. The flipping animation should be similar to the example provided in this link, but the flipping should start from the top row and go all the way down to the last row before starting over again.

$(document).ready(function() {
setInterval(function() {
$('.flashcard').toggleClass('flipped');
}, 5000);
});
.stage {
-webkit-perspective: 1000;
}

.flashcard {
height: 300px;
width: 500px;
margin: 10% auto;
border: 1px solid gray;
box-shadow: 2px 2px 2px #000;
-webkit-transform-style: preserve-3d;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}

.flipped,
.back {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}

.front,
.back {
height: 300px;
width: 500px;
position: absolute;
text-align: center;
-webkit-backface-visibility: hidden;
}

.front p,
.back p {
margin-top: 25%;
font-size: 3em;
}

1

2

javascripthtmlcss

Answer №1

One way to achieve the desired outcome is by iterating through each row element and calling the flip function for each individual row instead of applying it to all elements with the "flashcard" class at once. Credit goes to @Terminator-Barbapapa for the initial logic, with minor adjustments made.

$(document).ready(function() {
  let delay = 0;
    $('tr').each(function() {
      let row = $(this);
      setTimeout(function() {
        row.find('.flashcard').each(function() {
          let card = $(this);

          setInterval(function() {
            card.toggleClass('flipped');
          }, 2500);
        })
      }, delay);
      delay += 1000;
    })
});
.stage {
  -webkit-perspective: 1000;
}

.flashcard {
  height: 30px;
  width: 50px;
  margin: 10% auto;
  border: 1px solid gray;
  box-shadow: 2px 2px 2px #000;
  -webkit-transform-style: preserve-3d;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.flipped,
.back {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

.front,
.back {
  height: 30px;
  width: 50px;
  position: absolute;
  text-align: center;
  -webkit-backface-visibility: hidden;
}

.front p,
.back p {
  margin-top: 15%;
  font-size: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <div class="stage">
        <div class="flashcard">
          <div class="front">
            <p>1</p>
          </div>
          <div class="back">
            <p>2</p>
          </div>
        </div>
      </div>
    </td>
    <td>
      <div class="stage">
        <div class="flashcard">
          <div class="front">
            <p>1</p>
          </div>
          <div class="back">
            <p>2</p>
          </div>
        </div>
      </div>
    </td>
    <td>
      <div class="stage">
        <div class="flashcard">
          <div class="front">
            <p>1</p>
          </div>
          <div class="back">
            <p>2</p>
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="stage">
        <div class="flashcard">
          <div class="front">
            <p>1</p>
          </div>
          <div class="back">
            <p>2</p>
          </div>
        </div>
      </div>
    </td>
    <td>
      <div class="stage">
        <div class="flashcard">
          <div class="front">
            <p>1</p>
          </div>
          <div class="back">
            <p>2</p>
          <</div>
        </div>
      </div>
    </td>
  </tr>
</table>

Answer №2

If you want to cycle through all the flipcards using jQuery, you can utilize the each() function to iterate through them and enclose the setInterval() function within a setTimeout() function with an increasing delay for each iteration of the loop.

$(document).ready(function() {
    let delay = 0;
    $('.flashcard').each(function() {
        let card = $(this);
        setTimeout(function() { 
            setInterval(function() {
                card.toggleClass('flipped');
             }, 2500);
        }, delay);
        delay += 200;
    });
});
.stage {
    -webkit-perspective: 1000; 
}

.flashcard {
    height: 100px;  
    width: 150px; 
    margin: 0 auto;
    border: 1px solid gray; 
    box-shadow: 2px 2px 2px #000;
    -webkit-transform-style: preserve-3d;  
    transition: all 0.3s;               
    -webkit-transition: all 0.3s;
}

.flipped, .back {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg); 
}

.front, .back {
    height: 100px;          
    width: 150px;
    position: absolute;    
    text-align: center;   
    -webkit-backface-visibility: hidden;       
}

.front p, .back p {
    margin-top: 25%;
    font-size: 1.4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
    <tr>
        <td>
            <div class="stage">
                <div class="flashcard">
                    <div class="front">
                        <p>1</p>
                    </div>
                    <div class="back">
                        <p>2</p>
                    </div>
                </div>  
            </div>
        </td>
        <td>
            <div class="stage">
                <div class="flashcard">
                    <div class="front">
                        <p>1</p>
                    </div>
                    <div class="back">
                        <p>2</p>
                    </div>
                </div>  
            </div>
        </td>
        <td>
            <div class="stage">
                <div class="flashcard">
                    <div class="front">
                        <p>1</p>
                    </div>
                    <div class="back">
                        <p>2</p>
                    </div>
                </div>  
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="stage">
                <div class="flashcard">
                    <div class="front">
                        <p>1</p>
                    </div>
                    <div class="back">
                        <p>2</p>
                    </div>
                </div>  
            </div>
        </td>
        <td>
            <div class="stage">
                <div class="flashcard">
                    <div class="front">
                        <p>1</p>
                    </div>
                    <div class="back">
                        <p>2</p>
                    </div>
                </div>  
            </div>
        </td>
        <td>
            <div class="stage">
                <div class="flashcard">
                    <div class="front">
                        <p>1</p>
                    </div>
                    <div class="back">
                        <p>2</p>
                    </div>
                </div>  
            </div>
        </td>
    </tr>
</table>

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

Remove the Prisma self-referencing relationship (one-to-many)

I'm working with this particular prisma schema: model Directory { id String @id @default(cuid()) name String? parentDirectoryId String? userId String parentDirectory Directory? @relation("p ...

javascripttypescriptprismaself-referenceself-referencing-table

Implementing Winston logging into a React JS project

I am looking to integrate Winston logging into my React application that was created using create-react-app. First, I installed Winston by running the following command: npm install winston Next, I imported Winston into my app.js file like so: import win ...

javascriptreactjsloggingwinston

Troubleshooting a perplexing problem with an unresponsive AngularJS directive

Here is the code from my app.js file (main JavaScript file) var currentUserId; window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile', 'myApp.Registermdl', 'ngProgress', &apo ...

javascriptangularjs

Encountering issues with accessing properties of undefined while chaining methods

When comparing lists using an extension method that calls a comparer, I encountered an error. Here is the code snippet: type HasDiff<T> = (object: T, row: any) => boolean; export const isListEqualToRows = <T>(objects: T[], rows: any[], has ...

javascripttypescript

If a <section> element contains a <header>, must it also include a <footer>?

Here is the current state of my code: <section id="one"> <h2>Section Title</h2> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </section> <section id="two"&g ...

html

Obtain the index of the selected item from a dropdown menu

Is there a way for the selectedIndex to return -1 if no item is selected, instead of the element's text at position 0? It seems that the selectedIndex always returns 0 even when nothing is selected. <select id="abc" name="abc"> <option& ...

javascriptjqueryselectselectedindex

Issue with IE7 Dropdownlist not appearing after changing class name when onFocus event is triggered for the first time

I need to adjust the CSS class of a dropdownlist when it is focused on, in order to change its background color. However, in IE7, when the dropdownlist is clicked, the CSS class changes but the options list does not appear until the dropdownlist is clicke ...

c#javascriptasp.netinternet-explorer-7

CSS slideshow animation is not functioning properly

Hey there, I'm new around here and I've got a question for you all. Please bear with me if I make any mistakes. So, I'm attempting to create a simple CSS slide image. In my animation code, I want the picture to fade from the left every time ...

css

django displaying a blank screen

I'm having trouble with the code, forms.py from django.form import datetime, widgets import datetime import calendar from bootstrap_datepicker.widgets import Datepicker class DateForm(forms.Form): date_1=forms.DateTimeField(widget=DatePicker( ...

pythonhtmldjango

Utilizing the HTML5 Download attribute for linking to external files

I am currently developing a web application for my own personal needs. One feature I would like to implement is the ability to set the download attribute on certain links. However, I have run into an issue where the files to be downloaded are hosted on ex ...

javascripthtmlcross-domaingreasemonkey

"Using Vue 3 to teleport content to a specific element and swap out existing

I've successfully implemented the use of Vue 3 teleport to display elements within a div. Although teleport adds items to the specified element, it doesn't replace existing elements in the div. Is there a way to configure teleport to replace th ...

javascripthtmlvue.js

Fluid centering of DIV content both vertically and horizontally

Check out this example: When dealing with fluid divs, line height won't work as expected. My current code relies on line-height which doesn't work when the box sizes change. How can I ensure that a link (content) always appears perfectly centere ...

htmlcssxhtmlmarginfluid-layout

Updates in dropdown events when options data has been modified

Hey there, I'm wondering about dropdown events. Let's say I have two dropdowns. When a selection is made in the first dropdown, all options in the second dropdown are replaced with new ones. For example, let's say the first dropdown has thes ...

javascriptjquerydrop-down-menu

How can I properly initialize React components?

I am currently learning React.js and experimenting with a progress bar animation. I stumbled upon this code that I would like to incorporate into my project, but I am unsure of where to place it. Check out the code here! The JavaScript code in question i ...

javascriptreactjsreact-bootstrap

Associate information with HTML elements

I've come across this question multiple times, but the solutions are mostly focused on HTML5. My DOCTYPE declaration is: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> I'm looking t ...

javascriptjqueryhtml

Creating a customized TextField look with styled-components and Material-UI's withStyles feature

Take a look at this customized TextField style with Material-UI's withStyles: export const StyledTextField = withStyles({ root: { background: 'white', '& label.Mui-focused': { color: 'white' }, ...

javascriptreactjsmaterial-uistyled-components

Angular2 - Utilizing Promises within a conditional block

I'm currently facing an issue where I need to await a response from my server in order to determine if an email is already taken or not. However, I am struggling to achieve this synchronously. TypeScript is indicating that the function isCorrectEmail( ...

javascriptangulartypescriptpromiseangular2-template

Find keys in an array based on a specified value

I need to retrieve an array of keys from an object that match a specified value ...

javascriptarraystypescriptobjectecmascript-6

Deleting the first element of an array in JavaScript using Node.js

I'm struggling to remove the first element of an array. When I try to use slice(1,1) or shift, I can't seem to retain a list. For instance, my array: [1499783769720,"54:52:00:62:46:66","54:52:00:b0:fa:57","54:52:00:8f:d9:7c","54:52:00:e7:67:10" ...

javascriptnode.js

Unlocking the potential of Three.js with mouse picking

I am looking to implement object picking in the following code snippet: var Three = new function () { this.scene = new THREE.Scene() this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000) this.camera.po ...

javascriptthree.jsmouse-picking