jQueryのanimateとslideToggleを組み合わせたスライドメニューの動作でつらつきが出てしまう。

Question

jQueryのanimateとslideToggleを組み合わせた比較的単純なスライドメニューを作成しました。
動作的には全く問題無いのですが、メニューが開くときに、何故かメニューがちらついてしまい悩んでいます。

スライドメニューのjQuery自体は、このように作成しました。

// btnをクリックする事により、drawrが左右に動きます。
// これにより、メニューの表示、非表示を実現しています。
$(function($) {
    $(document).ready(function() {
        $('.btn').click(function(){
            $('.drawr').animate({width:'toggle'});
        });
    });
});

// メニューは、大分類が並んでおり、
// 分類をクリックすると、その分類のメニューが、
// アコーディオン式で表示されるというものです。
$(function(){
    $(".accordion p").click(function(){
        $(this).next("ul").slideToggle();
        $(this).children("span").toggleClass("open");
    }); 
});

HTMLはこうです。

<!-- ハンバーガメニューボタン ここをクリックするとメニューがスライド表示される -->
<i class="fa btn fa-bars fa-stack-2x fa-inverse"></i>
<!-- メニューの本体 -->
<div class="drawr">
<!-- メニューの中身。最初は分類だけが見えていて、分類を押すと、その分類のメニューが表示される。 -->
<ul class="accordion">
    <li>
        <p><span>分類1</span></p>
        <!-- リストは最初は閉じている -->
        <ul>
            <li><a href="http://xxx.co.jp/aaa.html">メニュー１</a></li>
            <li><a href="http://xxx.co.jp/bbb.html">メニュー２</a></li>
            <li><a href="http://xxx.co.jp/ccc.html">メニュー３</a></li>
        </ul>
    </li>
    <li>
        <p><span>分類２</span></p>
        <ul>
            <li><a href="http://xxx.co.jp/ddd.html">メニュー４</a></li>
            <li><a href="http://xxx.co.jp/eee.html">メニュー５</a></li>
            <li><a href="http://xxx.co.jp/fff.html">メニュー６</a></li>
        </ul>
    </li>
</ul>
</div>

CSSはこのようにしました。

// スライドするメニューボックス
.drawr {
    display: none;
    position: absolute;
    top: 0px;
    right:0;
    width:260px;
}

#menu li {
    width:260px;
}

#menu li a {
    display: block;
}

// アコーディオンの中身のメニューは最初は非表示
.accordion ul {
    display: none;
}

このようにしました。

表示時、このメニューは非表示です。

<i class="fa btn fa-bars fa-stack-2x fa-inverse"></i>

のハンバーガーメニューをクリックすると

<div class="drawr">

がスライド表示されるのですが、何故かその際に、リストの中身が一瞬だけ表示されたような感じでちらついて見えるのです。

ほんの一瞬で、その後すぐにメニューが全て閉じた状態になります。

CSSでは、

.accordion ul {
    display: none;
}

としており、jQueryで非表示にしている訳では無いのに、なんでだろうという感じです。

こんな現象に悩まされた方はいらっしゃらないでしょうか？

「ひょっとして！？」的な事でもいいですので、何かピンとくる事がある方、ご教授頂けますと幸いです。

よろしくお願い致します。

Answer 1

すいません。
いろいろ触っていたら、自己解決してしまいました＞＿＜

原因は、高さ指定がされておらず、文字も折り返しされる状態だったので、メニューの出だしが文字がり返されて幅が広く、きちんと表示されいった段階で、高さがきちんとなるので、結果、ちらついた感じになってしまっていました

項目のpタグ(アコーディオンの項目の中身)のCSSを以下のようにしたところ、スライド時にちらついたりしなくなりました。

.accordion p {
    display:table-cell; // 要素をテーブルにする
    white-space: nowrap; // 文字の折り返しをしないようにする
    height: 50px;        // 高さの指定をきちんとする
    width:300px;         // スライドする幅以上の幅を指定
}

どうもお騒がせ致しました。