更改 DIV 的类或 CSS“显示”属性并平滑显示

Question

我有一个隐藏的 div，我需要用不同的 CSS 样式平滑地显示它，除了“显示”之外，所有样式都可以轻松更改。但是这个属性很关键，因为当它开始出现时，它会以不同的方式移动页面上的其他元素。这将取决于出现元素的“显示”属性。下一个元素将向右或向下移动。

我有 2 个按钮 - （将 div 显示为块）和（将 div 显示为内联块）它应该可以工作，但它不是。

jsfiddle example

这里是另一个jsfiddle，展示了如何更改可见 div 上的显示属性。我需要在隐藏 div 时更改它，然后使用简单的“.toggle(500);”以新的显示属性平滑地显示它。

$("#f").hide();

$(".toggle_h").bind("click", function(){    
    $("#f").hide();
})

$(".toggle_b").bind("click", function(){    
    $("#f")    
    .removeClass('i')
    .addClass('b')
    .toggle(500);
    return false;
})

$(".toggle_i").bind("click", function(){    
    $("#f")    
    .removeClass('b')
    .addClass('i')
    .toggle(500);
    return false;
})

.b{
    display:block;
    background:red;
}

.i{
    display:inline-block;
    background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f' >block2 flexible</div> 
<div class="i">block3 inline</div> 
<br>
<a href="#" class="toggle_b">show as block</a><br>
<a href="#" class="toggle_i">show as inline</a><br>
<a href="#" class="toggle_h">hide</a><br>

Answer 1

我认为这是不可能的。

但是有一种方法可以绕过这个错误。 只需将 div 的内容包装到另一个 div 并切换内容包装器，而您的原始 div 将保持可见，因为您可以在可见 div 上更改显示选项。

这里是jsfiddle

$(".toggle_b").bind("click", function(){    
    $("#w").hide();
     $("#f")        
      .removeClass('i')
      .addClass('b')
     $("#w").toggle(500);
})

$(".toggle_i").bind("click", function(){
    $("#w").hide();
    $("#f")    
    .removeClass('b')
    .addClass('i');
    $("#w").toggle(500);
})

.b{
    display:block;
    background:red;
}

.i{
    display:inline-block;
    background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f'> <div id='w' > block2 flexible</div> </div> 
<div class="i">block3 inline</div> 
<br>
<a href="#" class="toggle_b">show as block</a><br>
<a href="#" class="toggle_i">show as inline</a><br>

我发现的替代方法不是更改“显示”，而是更改另一个 CSS 属性以达到类似的效果，使用“float：left;”。

但是浮动元素内部不能有垂直对齐。

Answer 2

如果没有参数，$("#f").hide(); 将立即隐藏元素，没有动画。如果要对其进行动画处理，请添加持续时间参数，例如

$(".toggle_h").bind("click", function(){    
    $("#f").hide(500);
})

Answer 3

display 属性无法转换。使用 jQuery 的 show 和 hide 方法本质上与在 CSS 中使用 display: block 和 display: none 相同，正如我刚才提到的，不能转换。但是，像 opacity 或 width 这样的属性可以使用 CSS 进行转换。你会想要切换一个类，而不是使用.show 和.hide，并让CSS 进行转换。

如果您希望使用 jQuery 简单地淡入和淡出，您可以将 .hide 方法替换为 .fadeOut。

注意：我希望这就是你所指的:)