jquery - jquery 中的淡入和淡出？

Question

我想在同一个 jQuery 中使用 .fadeIn() 和 .fadeOut() 来实现两个不同的函数。

例如:想象一个表单

假设以下是单选按钮:

O U.S. - 如果我选择美国，它会淡出 - 美国的城市/省份O 加拿大。- 如果我选择加拿大，它会淡入 - 美国的城市/省份

另一个单选按钮://这与上面的单选按钮(美国，加拿大)之间没有关系

O Male - 它应该在酒吧、酒吧等地方淡出O 女性-它应该在商场、水疗中心等处褪色

我该如何使用jquery？

Answer 1

jsFiddle Demo

如果我理解得好，这应该符合您的需求。

HTML

    <input type="checkbox" id="group1Switch" value="group1" /><label for="group1Switch">group 1</label>
&nbsp;&nbsp;&nbsp;
<input type="checkbox" id="group2Switch" value="group2" /><label for="group2Switch">group 2</label>
<br /><br />
<input type="radio" name="fieldSwitch" id="type1Switch" value="type1" /><label for="type1Switch">type 1</label>
&nbsp;&nbsp;&nbsp;
<input type="radio" name="fieldSwitch" id="type1Switch" value="type2" /><label for="type1Switch">type 2</label>

<br /><br />

<fieldset id="group1">
    <legend>Group 1</legend>
    type 1 <input type="text" class="type1" />
    <br />
    type 2 <input type="text" class="type2" />
</fieldset>
<fieldset id="group2">
    <legend>Group 2</legend>
    type 1 <input type="text" class="type1" />
    <br />
    type 2 <input type="text" class="type2" />
</fieldset>

jQuery

$('input[type=checkbox]').click(function(){
    var _this = $(this);

    if( _this.is(':checked') ){
        $('#' + _this.val() ).fadeIn();
    } else {
        $('#' + _this.val() ).fadeOut();
    }
});


$('input[type=radio]').click(function(){
    var _this = $(this);

    $('fieldset input.' + _this.val() ).fadeIn();
    $('fieldset input:not(.' + _this.val() +')' ).fadeOut();
});