Javascript jQuery动画不适用于flex

我有一系列的div，其中包含一个flex元素，每个div都具有相同的灵活性。当我单击其中一个按钮时，此函数将触发：

// hides and unhides and changes the size of elements...
function button_flexchange(element,quantity) {
    $(element).css('flex',''+quantity);
}

这是有效的-本质上它只是隐藏和取消隐藏一个元素，所以传递按钮flexchange（'#thisdiv'，0），它将通过将其flex值更改为0来隐藏#thisdiv

我认为更好的方法是在jQuery中使用animate函数来隐藏它，所以更像这样：

// hides and unhides and changes the size of elements...
function button_flexchange(element,quantity) {
    $(element).animate({
        'flex',''+quantity
    }, {duration: 2000});
}

但这不起作用。我曾尝试将flex更改为flex grow设置，但我对jquery和flex之间的关系还不够熟悉，因此无法实现这一点

我的CSS示例：

#help_icons { width: 150px; display: flex; flex-direction: row; flex-wrap: nowrap; }
.help_icon { margin: 0 5px 0 5px; }
.help_icon:hover { -webkit-filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); cursor: pointer; }
#help_icon_peerassess { background: url('/css/images/icons/peer_assessment.png') no-repeat; }
#help_icon_peerhelp { background: url('/css/images/icons/help_icon.png') no-repeat; }
#help_icon_helpmypeers { background: url('/css/images/icons/help_others.png') no-repeat; }

以及这些元素的HTML：

<div id="help_icons">
    <div id="help_icon_peerassess" class="help_icon" title="Request this work be peer assessed"></div>
    <div id="help_icon_peerhelp" class="help_icon" style="" title="Request help from your peers"></div>
    <div id="help_icon_helpmypeers" class="help_icon" style="" title="Offer your help to others"></div>
</div>

这里是一个提琴（我使用图像，但这使用文本）：

谢谢大家!