jquery - オーバーフローが jQuery .css クリック イベントで機能しない

Question

割り当てoverflow: hiddenていますが、機能していないようです

jsフィドル

html

<ul class="list-container">
    <li>items items</li>
    <li>items items</li>
    <li>items items</li>
    <li>items items</li>
    <li>items items</li>
    <li>items items</li>
    <li>items items</li>
    <li>items items</li>
    <li>items items</li>
</ul>
<a href="#" class="hide_list">Hide list</a>

jQuery

$('.hide_list').click(function() {
        $('.list-container').animate({width: "2px"});
        $('.list-container').css("overflow","hidden");
    });

div でスライド シャット エフェクトを実現しようとしています。別の方法があったとしても、なぜこれが機能しないのかわかりません。

Answer 1

「list-container」を効果的に非表示にしようとしている場合は、おそらくこれを使用する必要があります。

$('.hide_list').click(function() {
    $('.list-container').animate({height: "2px"});
    $('.list-container').hide(2000);
});

または効果なし

$('.hide_list').click(function() {
    $('.list-container').animate({width: "2px"});
    $('.list-container').css("display","none");
});

Answer 2

JavaScript にエラーがあります。このコードを試してください:

$('.hide_list').click(function() {
    $('.list-container').animate({width: "2px"});
$('.list-container').css({"overflow":"hidden"});
});