jquery - 显示一个 <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 方法 一样，.show() 有一个可选参数，您可以在其中提供一个回调函数。 fx effect 完成后，您传递的函数将执行。

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

这将传递一个匿名函数作为参数，在效果之后调用。它只是隐藏了 #hideitem 对象。 您会注意到我添加了一个附加参数 'fast'。那是 jQuery 用来执行淡出的持续时间(也可以是一个以毫秒为单位的数字)。只有这样使用才有意义，否则 .show() 只会将 display 属性设置为 block。没有持续时间，我们就没有延迟。因此，它的回调函数将立即被调用。

如果你想同时显示和隐藏这些元素，只需同时调用这两个

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