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

What is the best way to align the variables in this JavaScript file with the variables in Flask/Python?

I have a JavaScript file that enables dynamic drop-down menus (i.e. selecting one option affects the others). However, I hard-coded the starting variables in this file to HTML elements 'inverter_oem' and 'inverter_model_name'. Now, I ne ...

javascriptpythonflaskjinja2

What size should I use for creating a responsive website?

After scouring the internet, I stumbled upon numerous dimensions referred to as proper for developing responsive designs. However, I am specifically interested in identifying the ideal breakpoints, particularly for mobile devices with small screens like ...

htmlcssresponsive

Enable the button if at least one checkbox has been selected

I've written some code similar to this: $('input[type=checkbox]').click(function(event) { $('.chuis').each(function() { if(this.checked) { $('#delete_all_vm').prop("disabled",false); } ...

javascriptjquery

Python code encountering issues within Django framework

I'm having trouble showing and hiding HTML elements based on the data I receive after clicking a button. The output of another Python file will generate this data, but the if statement doesn't seem to be working as expected: {% if data == 'e ...

pythonhtmldjango

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

I'm encountering the ExpressionChangedAfterItHasBeenCheckedError due to my getter function, selectedRows, in my component. public get selectedRows() { if (this.gridApi) { return this.gridApi.getSelectedRows(); } else { return null; } } ...

javascripthtmlangulartypescript

Is the state mutated when using the .map() function to update it?

I am new to working with React and I am still struggling to understand state mutation. After reading multiple posts on this topic, I am finding it difficult to grasp the concept of state mutation. So, I have decided to seek clarification on this matter. ...

javascriptreactjs

Is it possible to scale images dynamically using CSS without losing their proper proportions?

http://jsfiddle.net/CJzCA/ Is there a way to resize images using CSS in the above jsfiddle? The keyboard images are currently too big compared to the text, and I usually solve this issue by using Photoshop. It would be more convenient if we could resize t ...

cssimage-resizing

Dynamic jQuery Carousel

Is there a jQuery slider that can adapt to different screen sizes and handle images of varying widths? Appreciate any insights! ...

javascriptjqueryplugins

What is the best way to strip the text from a link that encompasses both text and an image using jquery?

I have a website with a list of items. Each item in the list has a link that includes both text and an image. Here is an example of the HTML structure: <li class="li-one" style=""> <a href="#" onclick="return ...

javascriptjqueryhtml

The printer is malfunctioning

My webpage has a div that includes various input fields with values assigned using jQuery. I wanted to print the contents of this div, so I found some code online to help me achieve this. However, when I try to print, the values in the input fields end up ...

javascriptjqueryajax

What is the reason for JSHint alerting me about utilizing 'this' in a callback function?

While working in my IDE (Cloud 9), I frequently receive warnings from JSHint alerting me to errors in my code. It is important to me to address these issues promptly, however, there is one warning that has stumped me: $("#component-manager tr:not(.edit-co ...

javascriptjqueryjshint

Exploring individual elements within a set of data, the age-old art of classic ASP

I am looking to extract specific elements from a "select" statement in order to populate a table on a website using Classic ASP. For instance, if my select statement below fetches these values; Name ID Alex Alex123 On the webpage, I would like th ...

htmlasp.netrecordset

Identifying copy and paste behavior within an HTML form using .NET CORE MVC 2.1

I inherited a project at my current company and one of the tasks involves allowing users to paste multiple ISBN numbers from Excel into a search field on my Index page (HTML). Sometimes, the ISBNs are poorly formatted with letters or special symbols mixed ...

htmlasp.net-core.net-coreasp.net-core-mvc

Does SCSS have a specific 'self' identifier?

I am looking to incorporate SCSS styles on the body by default, and then reapply them specifically to the P and LI tags (since I do not have complete control over the site and want to prevent plugins from interfering with my p's and li's). To ac ...

csssass

I am looking for a way to batch upload several images from an HTML page to a nodejs server, where I can then rename and

Exploring the world of nodejs, I am seeking guidance on updating multiple images from HTML to node js. Specifically, how can I rename each image differently and save them to a directory? Alternatively, is there another solution that would better suit my ne ...

htmlnode.js

Exploring ways to capture all console outputs or retrieve the current console content in frontend development

Currently working with Angular and looking to integrate a bug reporting feature into my application. I want to capture the content of the browser's console for debugging purposes. However, I'm unsure of how to access it. Not all errors are logge ...

javascriptnode.jsangular

Adding images in real-time

I am currently working on an Angular application where I need to assign unique images to each button. Here is the HTML code snippet: <div *ngFor="let item of myItems"> <button class="custom-button"><img src="../../assets/img/flower.png ...

htmlangulartypescript

Exploring the intricacies of multidimensional array scopes in AngularJS

I have a JSON value that includes a list of countries and states. I want to split this value into two different scopes: $scope.countries and $scope.states. When the country is changed, the state should change based on the selected country. Sample JSON da ...

javascriptphpjsonangularjs

Node.js can be utilized to make multiple API requests simultaneously

I am facing an issue while trying to make multiple external API calls within a for loop. Only one iteration from the for loop is sending back a response. It seems that handling multi-API requests this way is not ideal. Can you suggest a better approach fo ...

javascriptnode.jsexpress

A guide on wrapping text within a Material-UI MenuItem

I am struggling to display text in a popover in multiple lines for UI reasons. I have tried updating the code but so far, I have not been successful. Any suggestions? <Popover anchorEl={target} open={open} anchorOrigin={{ horizontal: 'middle& ...

cssreactjsmaterial-ui