Question

要素を上、左、右または下の辺から移動するのに完全に機能するコードがありますが、表示プロパティでは機能しません。コード：

$('#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').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>