Chaining jquery css Changes

Question

Hey guys i am trying to make a slide in slide out on menu list items. And i am using transition to give an animation to css settings. Now the point is how can i do something using jquery after the css has been applied. i have written this code but it seems to work at the same time. I want is that the #homeContainer width should be 0px and then the #galleryContainer width starts to increase. thanks.

jQuery(document).ready(function($) {
$('#galleryListItem').click(function(){
    $('#homeContainer').css('width','0px');
    $('#galleryContainer').css('width','600px');
});});

malkassem · Accepted Answer · 2014-01-05 16:21:07Z

1

You can use setTimeout function to put a delay (I used 500ms in the example below):

jQuery(document).ready(function($) {
$('#galleryListItem').click(function(){
    $('#homeContainer').css('width','0px');
    setTimeout(function () { $('#galleryContainer').css('width','600px'); }, 500);
});});

answered Jan 5, 2014 at 16:21

malkassem

1,9571 gold badge21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tewathia · Accepted Answer · 2014-01-05 16:46:20Z

You can use setTimeout for this to delay the application of css to the #galleryContainer, as suggested by malkassem, and you can also use setInterval to gradually increase the width(using an incrementing width value) of that container, to achieve the slide in effect, something along the lines of

var galleryWidth = 0;
setInterval(function () {
    galleryWidth += 50;
    $('#galleryContainer').css('width', galleryWidth + 'px');
}, 500);

But I think, in this case, what you really should use is jQuery's animate method (Reference). Like so:

$('#galleryListItem').click(function () {
    $('#homeContainer').animate({
        width: "0"
    }, 2000);
    $('#galleryContainer').show().animate({
        width: "600px"
    }, 2000);
});

Here's the DEMO

Collectives™ on Stack Overflow

Chaining jquery css Changes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related