显示一个<div>并隐藏另一个

Question

我有两个<div>要素:

<div id="hidden"> 

<div id="hideitem">
<input id="item5" type="radio" class="item" name="item" value="gen"/>General Function
</div>

我设置<div id="hidden">为display:none.我希望它在单击单选按钮时显示:

$("#item5").click(function() {
    $("#hidden").show();
}

但是<div id="hideitem">在<div id="hidden">展示后我怎么能隐藏？

Answer 1

像大多数人一样jQuery fx methods,.show()有一个可选参数,你可以在其中服务callback function.您传递的功能在fx effect完成后执行.

$('#hidden').show('fast', function(){
   $('#hideitem').hide();
});

这将传递一个anonymous functionas参数,该参数在效果之后调用.它只是隐藏了#hideitem对象.你会注意到我添加了一个额外的参数'fast'.这是jQuery用于执行淡出的持续时间(也可以是以ms为单位的数字).这样使用它真的很有意义,因为否则,.show()只需将display属性设置为block.没有持续时间,我们没有延迟.因此,将立即调用它的回调函数.

如果要同时显示和隐藏这些元素,只需同时调用它们

$('#hidden').show();
$('#hideitem').hide();