javascript - 单击按钮切换另一个 div 的显示

Question

我有一个代码可以完美地从顶部、左侧、右侧或底部移动元素，但似乎它不适用于显示属性，这是我的 javascript 代码:

$('#icon-for-search').click(function () {
    var targetValue;

    if ($('#search-wrapper').css('top') == "0px") {
        targetValue = '55px';
    } else {
        targetValue = '0px';
    }

    $("#search-wrapper").animate({
        top: targetValue
        }, 500);
    });

我有一个 id 名为“icon-for-search”的按钮，如果单击它，它会完美切换 #search-wrapper 的顶部值，但如果我将其更改为 display: block/none，则不会工作。有什么特别的原因吗？有人可以解释一下吗？

$('#icon-for-search').click(function () {
    var targetValue;

    if ($('#search-wrapper').css('display') == "none") {
        targetValue = 'block';
    } else {
        targetValue = 'none';
    }

    $("#search-wrapper").animate({
        display: targetValue
        }, 500);
    });

Answer 1

jQuery.animate 仅适用于数字 CSS 属性。您可以只切换元素:

$('#icon-for-search').click(function () {
    $('#search-wrapper').fadeToggle('slow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="icon-for-search">Search Icon</div>
<div id="search-wrapper">Search Wrapper</div>