Question

我正在分配overflow: hidden，但它似乎无法正常工作

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

那是因为你必须调用overflow：动画结束后隐藏。在动画期间，jquery会在内联中添加样式，并覆盖你的.css（“溢出”，“隐藏”）。以下是应该如何编写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

如果你试图隐藏“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 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"});

溢出隐藏不能使用jQuery .css单击事件

8 个答案: