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

Answer 2

这应该更顺畅，更容易维护：

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

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

            $(this).parent().siblings().animate(
                {
                    width: 125,
                }, 
                {
                    duration: 700,
                    specialEasing: 
                    {
                        width: 'easeInOutQuint',
                    }
            }); 
        });
});

正如您所看到的，我们将扩展当前点击的标题，而不是对特定的类进行操作，并缩小其余的兄弟姐妹（如果您将来会有多个，但即使是2，它也是最好的方法）

Answer 3

我还没有对它进行过测试，但我试图将代码减少一半，以便更容易维护。

$(document).ready(function () {

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

$('.right').addClass('sidebarable');
$('.left').addClass('sidebarable');

var hideDistance = 125;
var showDistance = 820;

//this is so you click the hidden sidebar to show it,
//rather than clicking the one that is already visible
//and having it do that weird show//hide thing.
$('.toggle').parent(':not(.sidebar)').click(
function()
{   
    $('.left').toggleClass('sidebar');
    $('.right').toggleClass('sidebar');   

        $('.sidebarable:not(.sidebar)').animate(
        {
            width: hideDistance,
        }, 
        {
            duration: 700,
            specialEasing: 
            {
                width: 'easeInOutQuint',
            }
        });//hidden siderbar 



        $('.sidebar').animate(
        {
            width: showDistance
        }, 
        {
            duration: 700,
            specialEasing: 
            {
                width: 'easeInOutQuint',
            }
        });//active siderbar    

});//click toggle function

});//ready

jQuery隐藏和显示动画错误

3 个答案: