溢出隐藏不适用于 jQuery .css 点击事件答案

【问题标题】：Overflow hidden not working with jQuery .css click event溢出隐藏不适用于 jQuery .css 点击事件
【发布时间】：2013-08-28 13:13:33
【问题描述】：

我正在分配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 上实现滑动关闭效果。即使有其他方法可以做到这一点，但我不确定为什么这不起作用。

【问题讨论】：

您可能需要指定高度？
@Tim 不幸的是这没用
移动css中的overflow:hidden设置；或动画之前
我们能否支持这个问题来帮助其他用户。我花了一段时间才找到问题，因为我认为问题出在我的脚本中，然后我认为问题出在我的 css 中。

标签： jquery css jquery-animate

【解决方案1】：

尝试交换它们。

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

【讨论】：

哇！这行得通，多么奇怪。我希望我们可以投票支持这个问题以帮助其他用户。这让我很困惑，因为我认为错误是在我的脚本中的其他地方导致了问题。

【解决方案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");
    });
});

【讨论】：

这行得通，谢谢。但我只是要交换它们，因为这也有效。 +1

【解决方案3】：

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

【讨论】：

我设置溢出隐藏的原因是因为当它动画到2px时它仍然显示，好像溢出被接受为标准

【解决方案4】：

那是因为你必须在动画结束时调用 overflow: hidden 。在动画期间，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");
    });
});

【讨论】：

这行得通，谢谢。但我只是要交换它们，因为这也有效。 +1

【解决方案5】：

试着这样写：

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

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

【讨论】：

【解决方案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");
});

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

从

交换下面的代码

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

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

到

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

【讨论】：