Chaining jquery css Изменения

Question

Эй, ребята, я пытаюсь сделать слайд в слайде на элементах меню. И я использую переход, чтобы дать анимацию настройкам css. Теперь, как я могу сделать что-то, используя jquery после применения css. Я написал этот код, но, похоже, он работает одновременно. Я хочу, чтобы ширина #homeContainer была равна 0px, а затем ширина #galleryContainer начинает увеличиваться. спасибо.

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

Answer 1

Вы можете использовать setTimeout функцию, чтобы вставить задержку (я использовал 500мс в примере ниже):

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

Answer 2

Вы можете использовать setTimeout для этого, чтобы отложить применение CSS к #galleryContainer, а предложенный malkassem, и вы также можете использовать setInterval для постепенного увеличения ширины (с использованием значения увеличения ширины) этого контейнера, чтобы добиться эффекта скольжения, что-то вдоль линий

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

Но я думаю, что в этом случае вы должны использовать метод jQuery animate (Reference). Как так:

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

Вот DEMO