Is there a way to trigger two distinct CSS transitions simultaneously with a single click?

Below is a script that rotates two images in opposite directions when clicked. One image spins clockwise while the other spins counter-clockwise. The challenge is that each image requires an individual click to rotate. My goal is to make both images rotate with a single click. Any tips or suggestions would be greatly appreciated as I am new to using jQuery.

$(document).ready(function() {

  $("#rotate3").click(function() {
    if ($(this).css("transform") == 'none') {
      $(this).css("transform", "rotate(45deg)");
    } else {
      $(this).css("transform", "");
    }
  });
  
  $("#rotate4").click(function() {
    if ($(this).css("transform") == 'none') {
      $(this).css("transform", "rotate(-45deg)");
    } else {
      $(this).css("transform", "");
    }
  });
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="rotate3" src="https://via.placeholder.com/115" width="115" height="115" alt="" />
<img id="rotate4" src="https://via.placeholder.com/115" width="115" height="115" alt="" />

jquerycss

Answer №1

I assigned the same class name to multiple img elements.

$(document).ready(function() {

  $(".rotate").click(function() {
    if ($(this).css("transform") == 'none') {
      $("#rotate3").css("transform", "rotate(45deg)");
      $("#rotate4").css("transform", "rotate(-45deg)");
    } else {
      $("#rotate3").css("transform", "none");
      $("#rotate4").css("transform", "none");
    }
  });

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="rotate3" class="rotate" src="https://via.placeholder.com/115" width="115" height="115" alt="" />
<img id="rotate4" class="rotate" src="https://via.placeholder.com/115" width="115" height="115" alt="" />

Answer №2

To simplify the code, you can assign the same class to all rotating elements like rotate. Then, you can trigger a click event based on that class. You can also utilize data attributes to specify the rotation value needed. See the example below:

$(document).ready(function() {
  $(".rotate").click(function() {
    $('.rotate').each(function(){
      if ($(this).css("transform") == 'none') {
        $(this).css("transform", "rotate("+$(this).data('rotate')+")");
      } else {
        $(this).css("transform", "none");
      }
    });
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="rotate3" class="rotate" src="https://via.placeholder.com/115" data-rotate="45deg" width="115" height="115" alt="" />
<img id="rotate4" class="rotate" src="https://via.placeholder.com/115" data-rotate="-45deg" width="115" height="115" alt="" />

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

In search of a comprehensive demonstration of how to use JQuery/Ajax for pinging with success and failure detection

Given that the process is asynchronous with multiple requests happening in parallel, I would like a solution that can handle these requests and identify which success/failure corresponds to each specific request. I am considering utilizing the jqXHR Object ...

ajaxjquery

Storing x-editable inputs in a MySQL database

Is there a way to store x-editable form data into a MySQL database using PHP and jQuery? You can see my code snippet below: <a href="#" id="username" data-type="text" data-pk="1" data-title="Enter Username">John</a> <script> //edita ...

phpjquerytwitter-bootstrapx-editable

Changing the direction to reverse column will cause the navigation component to be hidden

Issue: The <Navigation/> components disappear when using flex-direction: column-reverse. However, if I switch to flex-direction: column, the component appears at the top of the screen and is visible. My objective is to display my <Navigation/> ...

htmlcssreactjs

Moving from the end to the beginning with a jQuery slider transition

Instead of relying on external plugins, I built this slider from scratch: function customSlider(selector, interval, index) { var slider = this; this.ind = index; this.selector = selector; this.slides = []; this.activeSlide = 0; this.amount; ...

javascriptjqueryhtml

Coloring weeks in fullcalendar's two-shift calendar

Can FullCalendar create a calendar with alternating colors for odd and even weeks? Visit the FullCalendar demos here For example, see image below: https://i.sstatic.net/D5qza.png ...

javascriptcssfullcalendar

Is there a way to create a two-toned horizontal rule tag?

Looking for a way to create a stylish two-toned divider line at the bottom of my header. It should be two pixels tall, with a grey top half and white bottom half. While I considered using two one pixel divs stacked together, I'm hoping there's a ...

htmllinear-gradientscss

The partnership between Selenium and WhitePages has created an innovative solution

I am currently attempting to register on . The registration process requires entering my first name, last name, email address, and password. For the first name field, I attempted to locate the element by CSS using the syntax "input#name_fname", however, I ...

cssseleniumselenium-webdriver

Customize hover effects for MuiCheckbox

For some reason, my checkboxes are displaying a circle on hover that I want to remove. https://i.sstatic.net/62TLL.png I attempted to make overrides in MuiTheme: export const MUI_THEME = createMuiTheme({ overrides: { MuiCheckbox: { root: { ...

cssreactjsmaterial-ui

Using 'php://input' to receive JSON data in an AJAX request

I am receiving a string from file_get_contents('php://input'). I have attempted to use json_decode(), but the string is not in JSON format. Below is the AJAX request and PHP code. How can I retrieve the JSON data sent from the AJAX request and co ...

javascriptphpjqueryjsonajax

Issue with JQuery: Fancybox not functioning properly within Google Maps

While working with a Google Map, I encountered an issue where I needed to allow users to expand images within the map itself. Fancybox seemed like the perfect solution for this, but unfortunately it is not functioning as expected. Link to example In the ...

jquerygoogle-mapsgoogle-maps-api-3jquery-pluginsfancybox

Guide on navigating to a specific page with ngx-bootstrap pagination

Is there a way to navigate to a specific page using ngx-bootstrap pagination by entering the page number into an input field? Check out this code snippet: ***Template:*** <div class="row"> <div class="col-xs-12 col-12"> ...

htmlcssangulartypescriptreact-native

Utilizing the power of jQuery's .each() method to assign a function to numerous slideshow containers

On my one-page website, I have numerous small jQuery Cycle slideshow divs with varying data-values, like: <div class="foo bar" data-value="1000"> <img src="directory/img_0.jpg" alt="img 0" /> <img src="directory/img_1.jpg" alt="img ...

jqueryfunctioncycleeach

When utilizing gridView, the ExecuteReader method will throw an error if the CommandText property has not been

I am encountering an issue with populating a gridView using the ExecuteReader function in my program. Every time I run it, I receive an error message stating "ExecuteReader : CommandText property has not been initialized". aspx.cs private void LoadGr ...

c#htmlcssasp.net

Despite seeming false, my Javascript if statement still evaluates to true

On my webpage, I have a button and a form. The intended functionality is for the button to display the form when clicked, and hide it when clicked again. The issue I'm facing is that no matter if the statement is true or false, the first if statement ...

javascriptjquery

section element is not receiving styles from the specified class

Whenever I want to ensure that a class is only used on specific elements, I usually prefix it with the element name. For example, using div.className limits the className styling to just div elements. However, when I tried the same approach with a section ...

htmlcss

Retrieve data from jqgrid cell content

Within my jqgrid cells, I have incorporated both image and text using a formatter function as shown below: function myFormatter (cellvalue, options, rowObject) { switch(cellvalue){ case 'Unknown': newCell="<img src=&ap ...

jqueryjqgrid

A guide to setting an href using variable values in jQuery through manual methods

I have a datepicker set up where each day, month, and year is stored in a variable. I then display this information in the desired format. Below is the jQuery code: jQuery(document).ready( function($){ alert('alert function'); var txtFr ...

javascriptjquery

Different "criteria" for CSS wildcard selectors using Selenium

There are several CSS webelements on my page with ids in the format: cell_[number]-button_[number] I am attempting to target ALL of these elements by using Selenium to locate all elements that begin with cell and include button: var elements = Util.driver ...

javacssseleniumwildcard

Customize your Wordpress site with a JQuery load more button specifically designed for custom post types

I'm currently working on adding a "load more" button to my WordPress website in order to load my custom post types. I've managed to successfully make it load the posts, but I'm facing an issue where each time I load more posts, it replaces t ...

javascriptphpjqueryajaxwordpress

The Div elements are not displaying properly in the correct size on the responsive webpage

Looking to create a responsive design for a follow page. Although I've managed to make it work, adding a line at the top of each row is causing layout issues and the Box container is not displaying consistently in size. I attempted to set up a fiddl ...

htmlcssresponsive-designzurb-foundation