javascript - jQuery 隐藏和显示动画错误

Question

http://invisiblewebdesign.co.uk/temp/dreamteam/

您好..上面的链接有一些内容的滑动div。基本上我理想中想要的是，当您单击较薄的 div(并且只有较薄的 div)时，它会扩展和收缩另一个。我已经尝试过这样做，但我认为我的做法不是很聪明。

有人可以建议一个更明智且更优雅的解决方案吗。

谢谢

克里斯

JS:

$(document).ready(function () {

    $('.right').addClass('sidebar');

    $('.toggle').click(
    function()
    {   
        $('.left').toggleClass('sidebar');
        $('.right').toggleClass('sidebar');         

        if($('.right').is('.sidebar'))
        {               
            $('.left').animate(
            {
                width: 125,
            }, 
            {
                duration: 700,
                specialEasing: 
                {
                    width: 'easeInOutQuint',
                }
            });



            $('.right').animate(
            {
                width: 820
            }, 
            {
                duration: 700,
                specialEasing: 
                {
                    width: 'easeInOutQuint',
                }
            });     

        }

        if($('.left').is('.sidebar'))
        {       
            $('.left').animate(
            {
                width: 820,
            }, 
            {
                duration: 700,
                specialEasing: 
                {
                    width: 'easeInOutQuint',
                }
            });
            $('.right').animate(
            {
                width: 125,
            }, 
            {
                duration: 700,
                specialEasing: 
                {
                    width: 'easeInOutQuint',
                }
            }); 
        }       
    });

});

Answer 1

简化脚本:

HTML:

<div class="content">

    <div class="left">    
        <div class="header">
            <h2>Users</h2>
        </div>
        <div class="content">
        </div>            
    </div>

    <div class="right">    
        <div class="header">
            <h2>Placements</h2>
        </div>    
        <div class="content">
        </div>                
    </div>   

</div>

CSS:

.left { float: left; }
.right { float: left; margin-left: 10px; }
.header { height: 40px; cursor: pointer;}
.content { height: 200px; }
.left { width: 820px; }
.right { width: 120px; }

.content h2 {
    color: white;
    font-size: 1em;
    font-weight: bold;
    float: right;
    padding: 10px;
}

.left .header { background-color: red; }
.left .content { background-color: pink; }
.right .header { background-color: green; }
.right .content { background-color: orange; }

jQuery:

$('.content .left').click(function() {
  myAnim('.right', '.left');
});

$('.content .right').click(function() {
  myAnim('.left', '.right');
});

function myAnim(small, big) {
    $(small).animate({
        width: 125,
    }, {
        duration: 700,
    });

    $(big).animate({
        width: 820
    }, {
        duration: 700,

    });
}

jsFiddle here