Question

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

想知道是否有办法用上面的jquery逻辑实现转换？在添加或删除类之间。

我已经尝试了以下，但它不起作用：（这是一个简单的div小高度＆gt;大高度切换）

.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; 
}

也：

.contracted {
    height: 100px;
}

Answer 1

将transition应用到您的.greenbox课程，而不是您要添加的{2}中的任何一个。除去：

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

话虽如此，你不能转换到CSS中的auto值，所以，你想要在这里使用的技巧是将扩展类的max-height设置为更大的值而不是其内容的高度，而是过渡到它。

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

根据您为较大max-height设置的值，您可能需要调整转换的时间以改善其外观。

顺便说一句，你完全可以用CSS实现这一点，完全不需要任何JavaScript，如：

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

Answer 2

您似乎可以简化JavaScript并且只有一个类可以切换。你不能使用CSS来设置自动动画，因为它不知道这意味着什么，但你可以用max-height欺骗它......你必须只是随意并且最接近常见的大小。否则你将不得不使用jQuery动画（或速度）并查询高度，以便知道要动画的整数 - 然后将CSS转换出来。

的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

实现addClass和removeClass之间的过渡效果

2 个答案:

的jQuery

CSS