CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kalabo
kalabo

Reputation: 564

jQuery Hide and show animation bug

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

Hi there..the link above has some sliding divs for the content. Basically what i idealy want is that when you click on the thinner div (and only the thinner one) that it expands and shrinks the other one. I have made an attempt at doing this but i dont think i am doing it a very clever way.

Can someone please advise a more sensible solution and hopefully more elegant.

Thanks

Chris

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

});

Upvotes: 2

Views: 1185

Answers (3)

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41965

Simplified script:

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

Upvotes: 2

Paul Stanley
Paul Stanley

Reputation: 4098

I haven't tested it, but I've attempted to cut your code in half, should make it easier to maintain.

$(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

Upvotes: -1

dvir
dvir

Reputation: 5115

This should work smoother and be more easy to maintain:

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

as you can see, instead of acting on a specific class, we will expand the current clicked header, and shrink the rest of his siblings (in case you will have more than one in the future, but even for 2 it is the best approach)

Upvotes: 1

Related Questions