Question

我做了4个盒子，想用jQuery隐藏第三个盒子。当我这样做时，第四个移动到第二个旁边，但那不是我想要的。我希望第四个留在原地。我该怎么办？

$('.list_ch3').click(function(){
     $('.list_ch3').hide('slow');
    });

.list {
    display:flex; flex-direction: 
}
.list li{
    list-style: none;
    background-color: pink; 
    color: white; 
    font-weight: 800;
    margin-left: 15px; 
    padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list" >
  <li class="list_ch1">list item 1</li>
  <li class="list_ch2">list item 2</li>
  <li class="list_ch3">list item 3</li>
  <li class="list_ch4">list item 4</li>
</ul>

Answer 1

.hide()将css display:属性设置为none，这会使元素消失而不占用空间。

如果您希望隐藏元素但仍然占用空间，请将其css visibility属性设置为hidden：

$('.list_ch3').css({'visibility':'hidden'});

示例：

＆＃13;

$('#foo').click(function(){
  $(this).css({'visibility' : 'hidden' });
});

$('#bar').click(function(){
  $(this).hide('slow');
});

＆＃13;

div{
  height: 100px;
  width: 100px;
  background-color: steelblue;
  margin: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">Click: Visibility Hidden</div>
<div id="bar">Click: Display None</div>
<div id="baz">Baz</div>

＆＃13;

Answer 2

尝试将可见性设置为隐藏

$('.list_ch3').click(function(){
    $('.list_ch3').css({"visibility":"hidden"});
});

.hide（）set display：none，删除其空间，visibility：hidden保留空格

<强>更新如果你仍然想要淡化效果，试试这个：

$('.list_ch3').click(function(){
    $('.list_ch3').animate({opacity:0}, 1000);
});

jsfiddle

如何在隐藏另一个对象时阻止位置更改

2 个答案: