jquery - 如何交换 - slideToggle 同时切换两个对象？

Question

目前我们有以下 jQuery 来隐藏一个选项并显示另一个选项。我们如何给它一个更平滑的过渡，让旧的滑动/淡入，新的滑动/淡入？

function pdi_click() {
if ($('#weekendpass').is(":checked") == true) {
    $('.pdioption2').hide('fast');
    $('input[name=pdinotattending]').attr('checked', false);

    $('.pdioption1').show('fast');

} else {
    $('.pdioption1').hide('fast');
    $('input[name=pdiattending]').attr('checked', false);
    $('.pdioption2').show('fast');

}

请参阅 jsfiddle 以推荐 jQuery 建议。

http://jsfiddle.net/JoshSalway/8YSRm/

Answer 1

尝试使用slideToggle为完整函数指定的回调。

function pdi_click() {
    if ($('#weekendpass').is(":checked") == true) {
        $('.pdioption2').slideToggle('slow', function(){
            $('.pdioption1').slideToggle('slow');
        });
        $('input[name=pdinotattending]').attr('checked', false);
    } else {
        $('.pdioption1').slideToggle('slow', function(){
            $('.pdioption2').slideToggle('slow');
        });
        $('input[name=pdiattending]').attr('checked', false);
    }
    //add_cost(25);
    //update_cost();
}

示例：http: //jsfiddle.net/8YSRm/2/

Answer 2

将您想要的元素设置为 CSSposition:absolute;并使用该.fadeTo()方法

LIVE DEMO

CSS：

.pdioption1, .pdioption2{
    position:absolute;  
}

问：

$(document).ready(function () {
    // This is more like it!
});


function pdi_click() {
    if ($('#weekendpass').is(":checked") == true) {
        $('.pdioption2').fadeTo(800,0);
        $('input[name=pdinotattending]').attr('checked', false);

        $('.pdioption1').fadeTo(800,1);

    } else {
        $('.pdioption1').fadeTo(800,0);
        $('input[name=pdiattending]').attr('checked', false);
        $('.pdioption2').fadeTo(800,1);

    }
    //add_cost(25);
    //update_cost();
}

Answer 3

确保完成一个动画。动画下一个作为回调：

http://jsfiddle.net/8YSRm/4/

$('.pdioption1').hide('fast',function(){
            $('input[name=pdiattending]').attr('checked', false);
            $('.pdioption2').show('fast');
});