jquery - 溢出隐藏不适用于 jQuery .css 点击事件

Question

我正在分配overflow: hidden，但它似乎不起作用

jsFiddle

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

尝试交换它们。

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

Answer 2

如果您在使用动画时将高度或宽度设置为不同于 0 的值，我认为 jquery 会删除隐藏的溢出。使用 animate 方法的回调可以解决它：

http://jsfiddle.net/jonigiuro/9s9vW/5/

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

Answer 3

是否有理由使用 jquery 设置溢出，这可以使用 css 完成，然后溢出不会被删除。此外，当使用代码时，li 元素会多出一行。这可以通过给 li 元素一个宽度来停止。

Answer 4

那是因为你必须在动画结束时调用溢出：隐藏。在动画期间，jquery 会内联添加样式，它们会覆盖您的 .css("overflow", "hidden")。这是应该如何写http://jsfiddle.net/krasimir/9s9vW/6/

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

Answer 5

试着这样写：

        $("#div").stop(true,false).animate({
           width: '2px'
        },500);

不要担心 .stop(true,false) - 所做的只是确保事件不会继续运行。

Answer 6

如果您试图隐藏“列表容器”，您可能应该使用这个：

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

您的 javascript 中有错误。试试这个代码：

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

Answer 8

交换下面的代码

$('.list-container').animate({width: "10px"}); 

 $('.list-container').css("overflow","hidden");

到

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