codybythesea codybythesea - 1 year ago 84
CSS Question

will CSS transitions override each other?

I have two

class and each contains a button in it, upon clicking, im using jQuery to
of one between
and hide/show the other. I also use CSS transition to animate the toggling, but it would work for one class and if I click the other button, the transition is not working.

Does multiple class selector cause issue with transitions?

.hello, .bye{
-webkit-transition: width 500ms;
-moz-transition: width 500ms;
-o-transition: width 500ms;
transition: width 500ms;

Here's the problem in jsfiddle

Answer Source

Your question is a little vague, so I took it upon myself and made some necessary changes to your code, so that the end result will resemble a lot what you (most likely) have in your mind.

CSS Notes:

  • To avoid having #btn1 and #btn2 overflow .hello and .bye respectively, you need to use overflow: hidden.

  • To avoid having .hello and .bye wrapping during the transition if there's not enough room for both, you need to use: padding: 0.

  • If you want your buttons to remain at the exact position they were (15px indented), use: margin-left: 15px.

CSS Code:

.bye {
    padding: 0;
    overflow: hidden;
    -webkit-transition: width 500ms;
    -moz-transition: width 500ms;
    -o-transition: width 500ms;
    transition: width 500ms;

#btn2 {
    margin-left: 15px;

JS Notes:

  • Your code is kind of inefficient as you basically repeat the same code over and over, so I created a function for you that can be used for both buttons.

JS Code:

Check out the full JavaScript code in the following:

  • Codepen:here;

  • jsFiddle:here;