What is the step-by-step process for executing the following functions: 1. magnify -> 2. spin 360 degrees -> 3. restore to original size before magnification -> 4. switch colors on and

Can you show me a demo featuring the following functions in order: 1. enlarge -> 2. rotate 360 degrees -> 3. resize to original size -> 4. change color (toggle)

$(document).ready(function() {
  $('.tlist td div').click(function() {

    $(this).css("z-index", "1000").animate({
      width: '+=90px',
      height: '+=90px',
      fontSize: '300%',
      zIndex: 1000
    }, {
      step: function(now, fx) {
        $(this).css('-webkit-transform', 'rotate(360deg)');
      },
      duration: 'slow'
    }).animate({
      width: '-=90px',
      height: '-=90px',
      fontSize: '120%',
      zIndex: 1

    }).toggleClass('changeColor').css("z-index", "1");
  });
});
body {
  width: 1340px;
  text-align: center;
}

.tlist {
  display: inline;
  border-collapse: separate;
  border-spacing: 2px 7px;
}

#rightT {
  padding-left: 115px;
}

.tlist th {
  font-size: 160%;
  font-family: Sans-serif;
}

.tlist td {
  width: 56px;
  height: 54px;
  border: 1px solid lightgrey;
}

.tlist td div {
  position: absolute;
  border: 1px solid lightgrey;
  width: 45px;
  color: white;
  background-color: orange;
  font-family: arial;
  font-size: 120%;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 11px;
  padding-left: 1px;
  padding-right: 1px;
  margin-top: -24px;
  margin-left: 3px;
}

.tlist td div.changeColor {
  color: black;
  background-color: white;
  border-color: red;
}

#left1,
#left2,
#left5,
#left6,
#left7,
#left8,
#left3,
#left4 {
  text-align: right;
}

#right1,
#right2,
#right3,
#right4,
#right5,
#right6,
#right7,
#right8 {
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id='leftT' class='tlist'>
  <tr>
    						...
</table>

<!-- Table on Right -->
<table id='rightT' class='tlist'>
  <tr>
                          ...
</table>

Take a look at the live example here.

javascriptjquerycssjquery-uijquery-animate

Answer №1

To reach your objective efficiently, employing CSS strategies is paramount.

Executing a straightforward and effective CSS approach using custom code snippets.

The response has been revised based on the feedback provided.

Check out the Code on jsfiddle

$(document).ready(function() {
  $('.tlist td div').click(function() {
    var t = $(this);
    t.removeClass('changeStyle');
    setTimeout(function() {
      t.addClass('changeStyle');
    }, 10);
  });
});
body {
  width: 1340px;
  text-align: center;
}

.tlist {
  display: inline;
  border-collapse: separate;
  border-spacing: 2px 7px;
}

#rightT {
  padding-left: 115px;
}

.tlist th {
  font-size: 160%;
  font-family: Sans-serif;
}

.tlist td {
  width: 56px;
  height: 54px;
  border: 1px solid lightgrey;
}

.tlist td div {
  position: absolute;
  border: 1px solid lightgrey;
  width: 45px;
  color: white;
  background-color: orange;
  font-family: arial;
  font-size: 120%;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 11px;
  padding-left: 1px;
  padding-right: 1px;
  margin-top: -24px;
  margin-left: 3px;
}

.tlist td div.changeColor {
  color: black;
  background-color: white;
  border-color: red;
}

#left1,
#left2,
#left5,
#left6,
#left7,
#left8,
#left3,
#left4 {
  text-align: right;
}

#right1,
#right2,
#right3,
#right4,
#right5,
#right6,
#right7,
#right8 {
  text-align: left;
}

@keyframes styleIt {
  0% {}
  25% {
    transform: scale(1.5) rotate(0deg)
  }
  70% {
    transform: scale(1.5) rotate(360deg);
  }
  100% {
    transform: scale(1);
    color: black;
    background-color: white;
    border-color: red;
  }
}

.changeStyle {
  animation: styleIt 1s forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='leftT' class='tlist'>
  <tr>
    <th></th>
    <th id='a1'>1</th>
    <th id='a2'>2</th>
    <th id='a3'>3</th>
    <th id='a4'>4</th>
    <th id='a5'>5</th>
    <th id='a6'>6</th>
    <th id='a7'>7</th>
    <th id='a8'>8</th>
  </tr>
  <tr>
   <!-- Table content continues, displaying numbered divisions -->
  </tr>
  <!-- Additional rows of table content -->
</table>

<!-- Another Table to the Right -->
<table id='rightT' class='tlist'>
  <tr>
   <!-- Headers and numerical divisions for the second table displayed here -->
  </tr>
  <!-- More rows with number divisions in the second table -->
</table>

If you need further assistance or would like a jQuery solution, feel free to ask. Thank you.

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

Error encountered in Node/Express application: EJS partials used with Angular, causing Uncaught ReferenceError: angular is not defined

I seem to be missing something important here as I attempt to incorporate ejs partials into a single-page Angular app. Every time I try, I encounter an Uncaught ReferenceError: angular is not defined in my partial. It seems like using ejs partials instead ...

javascriptangularjsnode.jsmean-stack

Encountering a 500 internal server error when utilizing jQuery and Ajax with Laravel 5.2

I have been working on a post editing system using jQuery and Ajax in Laravel 5.2. But when I try to save the changes by clicking on the button inside my Bootstrap modal, an error pops up: Error: POST http://localhost:8000/edit 500 (Internal Server Error) ...

javascriptjqueryajaxtwitter-bootstraplaravel-5

Troubleshooting imagejpeg() Function Failure in PHP Server

I've been working on implementing image cropping functionality for my website. I've managed to send an array of cropped image dimensions (x, y, width, height) to my PHP script. On my localhost, the script successfully crops the image, but unfort ...

javascriptphpjqueryajaximage

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Recently, I was considering incorporating wavesurfer.js into one of my projects so I decided to explore the demo on To test it out, I uploaded a large mp3 file (approximately 2 hours long) onto the designated area in the middle of the page. It appeared to ...

javascripthtmlhtml5-audioweb-audio-api

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

javascriptjquerycss

Issue with FullCalendar-v4 not displaying all-day events

I am facing an issue with my calendar where recurring events are displaying correctly, but single allDay events are not rendering, and I suspect it may be a field problem. I've attempted to set the event's start time as an iso date, but it doesn ...

javascripttypescriptfullcalendarfullcalendar-4

What is the best way to achieve a perfect rounded div using Bootstrap 4?

While browsing through the Bootstrap documentation and searching on stackoverflow, I came across a solution to create circular images using border-radius set at 50%. However, when I tried implementing it with my slightly oversized image, it ended up lookin ...

htmlcssreactjs

What could be causing the Vue.js image component to malfunction?

I am having an issue. I want to create a Vue.js Component. This component displays an image, similar to the <img> tag. If you are familiar with the <img> tag, this question should be easy for you to understand. Here is the code I have: props ...

javascriptimagevue.jsvue-component

Extract information from an external website using AJAX in Laravel

On my cart page, I utilize ajax to retrieve destination information from the user and provide them with shipping options to calculate their shipping cost. While everything is functioning properly, one issue remains: I am unsure of how to iterate through t ...

javascriptajaxlaravel

The insertion was unsuccessful: Technique used in Meteor 1.3 and React

I am looking to add some simple text to the MongoDB using React. However, when I submit the form, the following error message is displayed in the console: insert failed: Method '/resolutions/insert' not found My setup includes autopublish and i ...

javascriptmongodbmeteorreactjs

How can I prevent users from inputting negative numbers in a cellEditable material-table?

In my project, I am utilizing a material table with editable cells. I need to implement a restriction that prevents users from entering negative numbers in the field and displays an error validation message. How can I achieve this functionality? Check out ...

javascriptreactjsmaterial-uifrontendmaterial-table

A guide to verifying a user's age using JavaScript by collecting information from 3 separate input fields

On page load, only the year input is required for users to fill in. The user can enter their birth year first without providing the month and day. Currently, I have a function that checks if a person is over 16 years old by comparing their birth year with ...

javascriptvue.jsecmascript-6ecmascript-5

Filtering data at different levels in Javascript/Javascript programming language

Consider this array: var selection = ["14-3","19-5", "23-5", "40-8", "41-8"]; We now have two separate arrays: Array1 includes the first part of each value (before hyphens) in the original array, such as 1 ...

javascript

Displaying videos in full screen using HTML5

I am attempting to create a fullscreen webpage with a video using the following code: <video id="backgroundvideo" autoplay controls> <source src="{% path video, 'reference' %}" type="video/mp4"> </video> ...

htmlcsshtml5-video

Raise the image above the wrapping div, positioning it at the very bottom

I'm struggling to position an image within a div in a way where: it protrudes above the div it begins at the very bottom of the div (with a small gap that I can't eliminate) Below is the relevant HTML code snippet: <div class="teaser-imag ...

cssimage

Disabling the submit button after submitting the form results in the page failing to load

I am encountering an issue with my HTML form that submits to another page via POST. After the form validates, I attempt to disable or hide the submit button to prevent double submission and inform the user that the next page may take some time to load. He ...

javascriptphpjqueryhtmlforms

How can I include a JSON object in an angularjs $scope variable?

How can I effectively inject my JSON Object into my angular $scope during the create() function? Sample HTML: <input type="text" class="title" placeholder="hold" ng-model="formData.text"/> <input type="text" class="desc" placeholder="description ...

javascriptjsonangularjs

What steps do I need to take to develop a syntax similar to Vue.js using only plain JavaScript?

<div id=""> <span>{{msg}}</span> </div> Assume that {{msg}} is a variable in JavaScript. Now, I aim to locate the parent tag of {{msg}} and replace its content with a new value using innerHTML, where {{msg}} serves as an identi ...

javascriptvue.js

When attempting to use the ResponsiveSlides plugin, the functionality of 'Image links' seems to be disabled in the Chrome browser

While everything is functioning perfectly in Firefox and IE, I've encountered an issue with Chrome. It only works after right-clicking and inspecting the element; once I close the Inspector, it stops working - displaying just an arrow cursor as if the ...

jqueryhtmlcss

Opt for res.render() over res.send() when developing in Node.js

I recently developed an image uploader for ckeditor. After uploading a file, I need to send back an html file that includes the name of the image to the client. Check out the code snippet below: router.post('/upload', function (req, res, next) ...

javascriptnode.jsexpressckeditor