animateでcssの変更

Question

<div class="more">
                <a class="menu">もっと見る</a>
                <table class="table">
                    <tr>
                        <th>aaaa</th>
                        <td>1111</td>
                    </tr>
                    <tr>
                        <th>bbbb</th>
                        <td>2222</td>
                    </tr>
                    <tr>
                        <th>cccc</th>
                        <td></td>
                    </tr>
                    <tr>
                        <th>dddd</th>
                        <td>3333</td>
                    </tr>
                    <tr>
                        <th>eeee</th>
                        <td>4444</td>
                    </tr>
                    <tr>
                        <th>ffff</th>
                        <td>5555</td>
                    </tr>
                </table>
            </div>

.menu {
  margin-left: 110px;
  color: red;
  font-size: 20px;
  text-align: center;
}

.menu p {
  margin: 0;
}

.table {
  display: none;
  margin: 0 auto;
  width: 300px;
}
table th,
table td {
  border: 1px solid #ccc;
}

.table th {
  width: 30%;
}

$(function(){
    $('.menu').on('click', function (){
        $(".table").animate({
            "display": "table"
        },
        1500
        );
    });
});

分からないこと

animateでcssを変更しようとしたのですができなくて困っています。

Answer 1

普通にfadeInしてください

$(function(){
  $('.menu').on('click', function (){
    $(".table").fadeIn(1500);
  });
});

Comments

[yambejp]

animateは数値化して徐々に変更できるものしか対応できません

Answer 2

書き方として、display: table;を指定するだけなら、animate()を使うと以下のようになります。

$(function() {
    $('.menu').on('click', function () {
        alert('aaaa');
        $(".table").animate({
            // アニメーションするプロパティ。数値として指定できるものだけしか指定できない
        },
        1500,
        function () {
            // アニメーション終了時の処理
            $(this).css({
                "display": "table"
            });
        });
    });
});

display: table;以外にも何か指定したいなら上記のソースコードを使ってください。
display: table;だけを変化させたいなら以下のような、setTimeout()での記述が妥当だと思います。

window.setTimeout(function() {
    $(".table").css({
        "display": "table"
    });
}, 1500);