implement a transition effect between addClass and removeClass

Question

$('.greenBox').hover(function(){
    $(this).addClass('expanded');
    $(this).removeClass('contracted');
}, function(){
    $(this).removeClass('expanded');
    $(this).addClass('contracted');
}); // end of hover state for green box

Wondering if there is a way to implement a transition with the above jquery logic? Between the adding or removing of the class.

I have tried the below, but it did not work: (It is a simple div small height > large height toggle)

.expanded {
    height: auto;
    // to make the box move up add back the bottom 300px
    // bottom: 300px;
    background: linear-gradient(#812990, #9e248e);
    -webkit-transition-timing-function: linear; 
    transition-timing-function: linear; 
}

also:

.contracted {
    height: 100px;
}

That entirely depends on what styles those classes apply. Depending on that, you could theoretically do this in CSS alone. — Rory McCrossan
– Rory McCrossan, Commented Oct 20, 2015 at 16:14
Headsup: you can NOT transition to/from auto values in CSS. Also you need both states for a transition to work and you haven't set a transition property. More info — Luuuud
– Luuuud, Commented Oct 20, 2015 at 16:16
You need to specify the transition setting in your CSS. Although, as @LuudJacobs says you cannot transition from/to height: auto so you would need to deal in concrete sizes. Here's a working CSS-only demo: jsfiddle.net/76n6Luc8 — Rory McCrossan
– Rory McCrossan, Commented Oct 20, 2015 at 16:18

Shaggy · Accepted Answer · 2015-10-20 17:00:42Z

Apply the transition to your .greenbox class, rather than either of the 2 you're adding & removing:

.greenbox{
    transition:height .5s linear;
}

Having said that, you cannot transition to or from an auto value in CSS so, the trick you would want to use here is to instead set the max-height of the expanded class to a value greater than the height its contents can ever be and transition that, instead.

.greenbox{
    transition:max-height .5s linear;
}
.contracted{
    max-height:100px;
}
.expanded{
    max-height:1000px;/* adjust to suit your content */
}

Depending on the value you set for the larger max-height, you may need to tweak the timing of the transition to improve how it looks.

Incidentally, you could achieve this entirely with CSS with absolutely no need for any JavaScript, like so:

.greenbox{
    max-height:100px;
    transition:max-height .5s linear;
}
.greenbox:hover{
    max-height:1000px;/* adjust to suit your content */
}

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

It seems like you can simplify the JavaScript and only have one class that you toggle. You can't use CSS to animate to auto, because it's not aware of what that means, but you can trick it with max-height... You'll have to just be arbitrary and get closest to the common size. Otherwise you'll have to use jQuery animate (or velocity) and query the height so you know what integer to animate to - and then leave the CSS transition out.

jQuery

$('.greenBox').hover( function() {
    $(this).addClass('expanded');
}, function() {
    $(this).removeClass('expanded');
});

CSS

.greenbox {
  height: 864572px;
  max-height: 100px;
  transition: .2s; 
}

.greenbox.expanded {
  max-height: 500px
}

jsFiddle

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 20, 2015 at 17:09

sheriffderek

9,0736 gold badges46 silver badges70 bronze badges

3 Comments

sheriffderek Over a year ago

You have to have a height: Npx; as well. With width you can add a width 100%, but height is a little whacky - because the DOM doesn't usually know what 100% means... 100% of what? etc.

Lieutenant Dan Over a year ago

Where do I add height height: Npx; ?

sheriffderek Over a year ago

That may have been confusing. I meant N to be a placeholder. In my example I have defined the height of the box.

Collectives™ on Stack Overflow

implement a transition effect between addClass and removeClass

2 Answers 2

Comments

jQuery

CSS

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

jQuery

CSS

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related