Incorporating a transition effect to simultaneously toggle between two classes

I'm currently troubleshooting the demo below. For some reason, I am unable to apply a transition to either .fa-chevron-right or .fa-chevron-left when toggling between two classes. Can anyone help me figure out why?

$("button").on("click", function(){
  $('.fa').toggleClass('fa-chevron-right fa-chevron-down');
});
body{padding:30px;}
button{padding:12px; min-width:60px;}
.fa-chevron-down{
  transition: all 3s ease;
}
.fa-chevron-right{
  transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<button class="btn btn-default">  <i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></button>

javascriptjquerycsscss-transitions

Answer №1

When it comes to CSS transition, it is important for changing CSS properties such as `background-color` or `width`. Your css class is responsible for altering the image that appears on the screen, rather than modifying any CSS styles directly. To implement CSS `transition`, you could consider using something like `transform: rotate(0.25turn);` instead of switching between two different images.

$("button").on("click", function(){
  $('.fa').toggleClass('css-chevron-right css-chevron-down');
});
body{padding:30px;}
button{padding:12px; min-width:60px;}
.css-chevron-down{
  transform: rotate(0.25turn);
  transition: all 3s ease;
}
.css-chevron-right{
  transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<button class="btn btn-default"> <i class="fa fa-chevron-right css-chevron-right pull-right" aria-hidden="true"></i></button>

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

Determine if a JavaScript code in my ASP view will be executed based on control from the controller

Working on an ASP.NET MVC4 system, I have a javascript code that displays a performance graph of students when the page loads. Here is the code for the graph: <script> window.onload = function () { var r = Raphael("holder"), ...

c#javascriptasp.netasp.net-mvcasp.net-mvc-4

An issue encountered when utilizing the express routes method within a NodeJS application

I'm running into an issue while attempting to restructure my NodeJS API, specifically when it comes to importing my routes. The error I'm encountering is as follows: /Users/pato/Documents/nodejs-bp-api/node_modules/express/lib/router/index.js:13 ...

javascriptnode.jsexpress

Having trouble displaying Vue Toast messages?

I have been trying to incorporate a toast message into my code, but unfortunately, the message does not appear and there are no errors in the console. The code functions properly and the invitation is sent successfully. I have used similar code in other fi ...

javascriptvue.jstoast

Implementing a tooltip popup inside the header cell of the ordering table

Apologies in advance for my lack of experience with coding more complex website features. I'm attempting to incorporate a tooltip popup into one of the header cells to provide additional information to users. While I have all the necessary component ...

htmlcss

The outline feature cannot be applied to buttons within a btn-group in Bootstrap 4

I have successfully removed the outline for a single button, but I am struggling to remove it for a button within a btn-group class. Check out my JSFiddle DEMO This is the HTML code I am working with: <button class="btn btn-primary">Button without ...

cssbootstrap-4

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

I created a blur in/out effect for my landing page, but it's not functioning as expected and I'm not sure why. It blurs out correctly, but the issue arises when I want the underlying Div to fade in. Currently, it just appears abruptly after the ...

javascripthtmlcss

The functions .ajaxStart and .ajaxStop seem to be malfunctioning

Having trouble displaying and hiding a loading gif before and after an Ajax request using ajaxStart and ajaxStop. Here's what I have: HTML: <div id="loading" style="display: none"><img src="loading.gif></div> JS: $("#searchForm") ...

javascriptjqueryajax

Is there a way to show a specific div element only during the initial two occurrences of a jade each loop?

How can I display a specific div only during the first two iterations of a loop in Jade? Is there a way to achieve the following logic in Jade? counter = 0 for each tab in tabs if (counter == 0) div.nav-header NAVIGATION counter++ else if ( ...

javascriptnode.jsfor-looppug

Show the price of the item with a click of a button

There are three buttons where I can select values and input them into the button. Once all three values are selected in the buttons, I would like the product of these values to be displayed in a fourth button. Here is my HTML code: <label>S *</l ...

jqueryhtmlangularjs

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...

javascriptjqueryhtmlcss

Prevent div from moving upward using CSS

Whenever I use the search box, a dropdown list of suggestions appears. However, the searchbox div element keeps moving both up and down. How can I prevent the div from moving upwards? The code snippet below shows a hardcoded unordered list of names for s ...

cssmaterial-ui

Button click does not fill in Jquery Datepicker?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link > <script type="text/javascript" src= ...

javascriptjqueryasp.netdatepicker

Is it necessary to download and install plotly if I am using the cdn in my HTML file?

I'm currently developing an online application using Flask. The user input is collected with d3.js and sent to app.py, where it is used for an API call to retrieve the necessary data. This data is then returned in JSON format to JavaScript for renderi ...

javascriptpythonhtmlflask

Access and retrieve pkpass files from a server using React

I've exhausted all options but still can't get it to work. I'm attempting to create an Apple wallet pass using https://github.com/walletpass/pass-js. When I download the pass on the node server where I've implemented it, everything work ...

javascriptnode.jsreactjspasskitapple-wallet

Utilizing jQuery to process date input in a Rails form

I have been utilizing the jquery_datepicker gem to choose dates in my form. However, the datepicker is passing parameters in this format: {"appointment"=>{"starts_at"=>"04/07/2012"}, "commit"=>"Submit", "id"=>"915"} However, Rails mandates th ...

jqueryruby-on-railsformsdatepicker

PhoneGap nested executeSql not functioning properly on iPad Simulation

My application seems to be working perfectly in Win-Safari, but encounters issues when wrapped by PhoneGap. Below is the code snippet: // working db connection db.transaction(function(tx) { tx.executeSql('SELECT * FROM tbl', [], function(tx, r ...

jqueryipadhtmlsqlitecordova

Coordinating the vertical scrolling of two div elements simultaneously. (scrolling both divs together)

I have a specific setup where I have a text box that is scrollable, and outside of this box are headings that correspond to different sections in the text. I am looking for a way to synchronize the scrolling of the text inside the box with the headings out ...

javascripthtmlcssscrollbootstrap-4

The placeholder attribute for input types does not display consistently across all browsers

I am experiencing an issue with the placeholder text in my input field. <input type="text" name='linkLabel{{index}}' autocomplete="off" class="input-large tight-form-url last remove-cross" required="required" placeholder="{{'linkLabel&ap ...

javascripthtmlcss

I'm experiencing an issue with my icons in Material-ui not displaying. Does anyone have any suggestions on how to resolve this issue?

Can anyone help me figure out why my icons aren't showing up in C# React? I've tried multiple solutions but none seem to work. Maybe someone here knows the fix. Original implementation link Here is the code snippet I'm currently working on: ...

javascriptreactjsmaterial-ui

Animate the entire paragraph with CSS hover effect

I'm seeking ideas on how to achieve a specific effect without the need to wrap individual lines in inner elements like span or a. Check out this example <div class="m-linkitem"> <h1>Hover Below</h1> <a href="#">Lorem ...

javascriptjqueryhtmlcss