Question

我有一系列带有flex元素的div，每个div都具有相同的灵活性。当我单击其中一个时，此功能将触发：

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

哪个有用 - 基本上它只是隐藏和取消隐藏元素，所以传递button_flexchange（＆＃39;＃thisdiv＆＃39;，0），它会通过将其flex值更改为0来隐藏#thisdiv。

我认为NICER是使用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>

这是一个小提琴（我使用图像，但这使用文字）：https://jsfiddle.net/gwefLn8q/2/

谢谢！

jQuery动画不适用于flex

0 个答案: