javascript - radio 检查上的 jQuery 幻灯片内容

Question

我正在尝试创建一个小的 jQuery 函数，以便在选中单选按钮时隐藏和显示内容。该脚本有效，但是当选中单选按钮时，内容显示不正确。能否实现先滑出再滑入其他内容的效果？

HTML:

<!-- Section class pricing -->
<section class="pricing">
    <div class="container">
        <hr class="hr">
        <!-- Price table switcher -->
        <div class="table-switcher" id="btn">
            <p class="fieldset">
                <input type="radio" checked="checked" name="duration" value="account-1" id="account-1">
                <label for="account-1">1</label>
                <input type="radio" name="duration" value="account-2" id="account-2">
                <label for="account-2">2</label>
                <span class="btn-switch"></span>
            </p>
        </div>
        <!-- Price table switcher end -->
        <div class="clearfix"></div>

        <!-- Info box -->

        <div class="clearfix"></div>

        <div class="accounts container">
        <div class="price-table">
            <!-- Account Plus -->
            <div class="col-md-12">
                    <!-- Table -->
                    <div class="account-1 account-box">
                    <ul class="list-unstyled col-md-6">
                        <li class="plan">Basic</li>
                            <li class="plan-cost">$99k</li>
                            <li class="plan-duration">Per Month</li>
                            <li>Use on One Site</li>
                            <li>Feature Two</li>
                            <li>Another Great Feature</li>
                            <li class="plan-button"><a href="#">Get Started &raquo;</a></li>
                    </ul>
                    <!-- Table end -->
                    <!-- Table -->

                        <ul class="list-unstyled col-md-6">
                            <li class="plan">Basic</li>
                            <li class="plan-cost">$99</li>
                            <li class="plan-duration">Per Month</li>
                            <li>Use on One Site</li>
                            <li>Feature Two</li>
                            <li>Another Great Feature</li>
                            <li class="plan-button"><a href="#">Get Started &raquo;</a></li>
                        </ul>

                    <!-- Table end -->
                    </div>
            </div>
            <!-- Account Plus end -->

            <!-- Account O€ -->
            <div class="account-2 account-box">
                <!-- Table -->
                <div class="col-md-6">
                    <ul class="list-unstyled">
                        <li class="plan">Basic</li>
                        <li class="plan-cost">$99</li>
                        <li class="plan-duration">Per Month</li>
                        <li>Use on One Site</li>
                        <li>Feature Two</li>
                        <li>Another Great Feature</li>
                        <li class="plan-button"><a href="#">Get Started &raquo;</a></li>
                    </ul>
                </div>
                <!-- Table end -->
                <!-- Table -->
                <div class="col-md-6">
                    <ul class="list-unstyled">
                        <li class="plan">Basic</li>
                        <li class="plan-cost">$99</li>
                        <li class="plan-duration">Per Month</li>
                        <li>Use on One Site</li>
                        <li>Feature Two</li>
                        <li>Another Great Feature</li>
                        <li class="plan-button"><a href="#">Get Started &raquo;</a></li>
                    </ul>
                </div>
                <!-- Table end -->
            </div>
            <!-- Account 0€ -->
        </div>
        </div>


    </div>
</section>

CSS:

// Prebuild colors
@white      : #ffffff;
@dark       : #4a4a4a;
@blue       : #4e94c9;
@blue-dark  : #2279bc;
@blue-font  : #276db3;
@purple     : #805ca2;
@purple-dark: #5b308d;
@gray-light : #a8a8a8;
@gray-font  : #797979;
@pink       : #bf4194;
@pink-light : #F04;

// Other
@letter-spacing:(2px);
.bold  { font-weight: 700}
.hr {
    max-width: 100px;
    height: 4px;
    background: url("../images/hr.gif") no-repeat center;
    margin: 20px auto;
}
// Pricing section -3
.pricing  {
    padding: 100px 0;
    h2 {
        letter-spacing: @letter-spacing;
        font-size: 30px;
        font-weight: 400;
        text-transform: uppercase;
        text-align: center;
        color: @blue-font;
        .bold {
            color: @purple-dark;
        }
    }
    // Price table switcher
    .table-switcher {
        text-align: center;
        input[type="radio"]:checked + label + .btn-switch,
        input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch{
            /* Safary bug fix selector */
            -webkit-transform: translateX(120px);
            -moz-transform: translateX(120px);
            -ms-transform: translateX(120px);
            -o-transform: translateX(120px);
            transform: translateX(120px);
            background: @blue-font;
        }
        .fieldset {
            margin-top: 15px;
            margin-bottom: 30px;
            display: inline-block;
            position: relative;
            padding: 0px 2px;
            border-radius: 50em;
            border: 1px solid @gray-light;
            input[type="radio"]:checked + label {
                color: @white;
                transition: all 0.5s;
            }
        }
        input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        label {
            position: relative;
            z-index: 1;
            display: inline-block;
            float: left;
            width: 120px;
            height: 39px;
            line-height: 45px;
            cursor: pointer;
            font-size: 1.4rem;
        }
        .btn-switch {
            position: absolute;
            top: 2px;
            left: 2px;
            height: 40px;
            width: 120px;
            background-color: @purple-dark;
            border-radius: 50em;
            -webkit-transition: -webkit-transform 0.5s;
            -moz-transition: -moz-transform 0.5s;
            transition: transform 0.5s;

        }
    }
    .no-js .table-switcher {
        display: none;
    }
    // Table info
    // Popover box
    .arrow_box {
        position: relative;
        background: @purple;
        border: 3px solid @purple-dark;
        padding: 15px;
        color: @white;
    }
    .arrow_box{
        &:after {
            top: 100%;
            left: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        &:before {
            top: 100%;
            left: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
    }
    .arrow_box {
        &:before{
            border-color: rgba(136, 183, 213, 0);
            border-top-color: @purple-dark;
            border-width: 10px;
            margin-left: -10px;
        }
        &:after {
            border-color: rgba(136, 183, 213, 0);
            border-top-color: @purple-dark;
            border-width: 10px;
            margin-left: -10px;
        }
    }
    // Accounts
    .accounts {
        position: relative;
        transition: all 0.5s;
    }

    .top-tooltip{
        background-color: #26c07d;
        font-size: 12px;
        font-weight: 400;
        margin:-87px auto 68px;
        padding: 6px;
        color:#fff;
        width:80px;

    }
    .price-table {
        width: 100%;
        .account-1 {

            .col-md-6 {
                padding: 0;
                left: 0;

            }
        }
    }
    .best-value{
        padding: 87px 0 72px !important;

    }
    .small-boxes {
        margin-top: 40px;
        padding-top: 72px;
        padding-bottom: 68px;
        text-transform: uppercase;
        text-align: center;
        background-color: #fff;
        width: 100%;
    }
    .plan {
        font-size: 24px;
        color: #79a5b3;
        line-height:30px;
        border: none !important;
    }
    .plan-cost {
        font-size:60px !important;
        color:#000 !important;
        line-height:90px !important;
        border: none !important;
    }
    .plan-duration {
        line-height: 30px !important;
        margin-bottom:35px;
        border: none !important;
    }
    .plan-button {
        border: none !important;
        margin-top: 30px;
    }
    .plan-button-big {
        border: none !important;
        margin-top: 45px;
    }
    .price-table ul li {
        color: #a2a4a6;
        font-size: 16px;
        border-bottom: #f2f4f5 1px solid;
        border-top: #f2f4f5 1px solid;
        line-height: 47px;
    }
    .price-table ul li a{
        background-color:#FFF;
        border: #d4d7d9 1px solid;
        padding: 15px 30px;
        font-size: 20px;
        color:#27b0d8;
        font-weight:400;
        text-decoration:none;
        border-radius: 4px;
    }
    .price-table ul li a:hover{
        background-color:#44bbdd;
        border: #44bbdd 1px solid;
        color:#fff;
    }
    .price-table ul li a.big{
        background-color:#ec4f4f;
        border: #ec4f4f 1px solid;
        padding: 15px 30px;
        font-size: 24px;
        color:#fff;
        font-weight:400;
        text-decoration:none;
        border-radius: 4px;
    }
    .price-table ul li a.big:hover{
        background-color:#293340;
        border: #293340 1px solid;
        color:#fff;
    }
}

JS:

$('.account-2').hide();
$(document).ready(function () {
    $('input[name="duration"]').click(function () {
        $('.account-1').fadeOut('slow');
        $('.account-2').fadeIn('slow');
    });
    $('input[name="duration"]').click(function () {
        $('.account-2').fadeOut('slow');
        $('.account-1').fadeIn('slow');
    });
});

Demo

Answer 1

尝试这个脚本... codepen

     $('.account-2').hide();
        $(document).ready(function () {
          var flagcheck= false;
            $('input[name="duration"]').click(function () {     
            if(flagcheck==false){
                $('.account-1').fadeOut('slow');
                $('.account-2').fadeIn('slow');
                flagcheck=true; 
            }else{
                $('.account-2').fadeOut('slow');
                $('.account-1').fadeIn('slow');                 
                flagcheck= false;
             }
            });

        });