CSS + JavaScript Transition ()

Question

Can you have two different _ #elem:hover{ width:integer(50}
#elem:active{width:integer(10)}
For the integer, for the first one I used width 50, and for the second one, I used width 10.
So is that even possible and how would I apply the hover and the active differently?

Here's why I need it :
On (javaScript ), I want to do this...
1 Function myFunction(){
2 var x = document.getElement
3 ById("elem");
4 if (x.style.transition==="width 5s")
5 {x.style.transition="width 1s";}
else {x.style.transition="width 5s"
}}

So on line 4 if the statement on line 4 is true(if), the line 5 should be excuted.
Which first if the transition is width 5s, then be width 1s.
I got two different transitions.
I'm not sure how the JS is supposed to work.
Help...

Answer 1

use classes to toggle the transition:

if(e.classList.contains("longTransition") {
e.classList.remove("longTransition"); e.classList.add("shortTransition");
} else{
e.classList.remove("shortTransition"); e.classList.add("longTransition");
}

define the transitions in classes
.longTransition {
transition: 5s;
}
.shortTransition {
transition: 1s;
}

Answer 2

Ginfio Sorry, I cannot understand why my code on work on your side.

Answer 3

It expands to larger width

Answer 4

Let me know if question doesnt make sense.

Answer 5

Ginfio Have you clicked on the Main Home button part?
I have given you the start up code, the rest is your try out work... You never learn if i show all the complete codes without your trials.

Anyway I have coded the majority of required codes, on the Main Home button already.

Answer 6

Calviղ actually you do when you try to understand the snippet.

Answer 7

I tried to understand your question, and formed this code for you to further working on it, please check it out..

https://code.sololearn.com/WH0mJrkMqQcW/?ref=app

Answer 8

Ok, I only see console log - width 5, width 1, ...

Can you make the action happen on the main menu?
Width it could be any integer, but for example...Width 50, then 10px, (toggle in in between 50px and 10px). Remember this is all done by transition so its smooth and slow(1s, 2s, 3s...).

Lets say it's (main menu) regional width is 50px;
This is what should happens when you click on the button.
click...width goes down 10px, click...width goes back up to 50px, click, width goes down to 10px, ..........

Answer 9

Calvin yes i dis click on the main home, and nothing... but when i click on rhe transition toggle, comes up with console: width....

Answer 10

Ok, maybe this will make sense to tou guys. Im trying to make profile. When you hover on the red circle(s), the content expands (height+width) So far, the content is at full width and height, so it would have to br set to 1 or 0 width+height.
So it expands on hover. And when you hover on a different profile, the current profile content will be to its normal width and height (0 or 1).

https://code.sololearn.com/W5IY7mg62I1r/?ref=app

Code is not customized yet. it's just a draft so far.

Answer 11

Ginfio use jQeury. it's simpler and cleaner to work with dom and dom animations

Answer 12

If I knew jQuery. but, im lm going to learn jquery.

Answer 13

what happens when tou click on the main home??