如何交换 - 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

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

的 LIVE DEMO

<强> CSS：

.pdioption1, .pdioption2{
    position:absolute;  
}

<强> JQ：

$(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');
});