0

現在、1 つのオプションを非表示にして別のオプションを表示する次の 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');

}

jQuery の推奨事項については、jsfiddle を参照してください。

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

4

3 に答える 3

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/

于 2013-02-06T01:36:40.660 に答える
1

目的の要素を 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();
}
于 2013-02-06T01:37:59.513 に答える
1

1 つのアニメーションが完了したことを確認します。次のものをコールバックとしてアニメーション化します。

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

$('.pdioption1').hide('fast',function(){
            $('input[name=pdiattending]').attr('checked', false);
            $('.pdioption2').show('fast');
});
于 2013-02-06T01:39:20.657 に答える