Question

i have 3 div’s & one button

<div id="Outer">
<div id="main" style='height:200px;width:300px'/>
<div id="child" style='height:20px;'/>
</div>

when some one will click on the button then child div left will be -20px and gradually
its width will be increase until its width is become to the width of main div and when again click on button the reverse action will be happen.

how could i do this using jquery animate function. thanks

Answer 1

I don’t know how do you select your button but this will do the trick;

$('#yourButtonId').click(function() {
    var $child = $('#child'),
        state = $child.data('state'),
        orgWidth = $child.data('orgWidth');
    if(!orgWidth) {
        $child.data('orgWidth', $child.width());
    }
    if(state != 'big') {
        $child
            .data('state', 'big')
            .animate({left:"-=20px",width:$('#main').width()});
    }
    else {
        $child
            .data('state', 'normal')
            .animate({left:"+=20px",width:orgWidth});
    }
});

You can see it working here.